Remove "select" arrow [duplicate]

3

Code:

<select class="backcolorselect" id="st" name="">
    <option class="backcolorselect" value="Sim">Sim</option>
    <option class="backcolorselect" value="Não">Não</option>
</select>

I need to remove the down-pointing arrow from the select, some help in CSS ?

This using the Zurb Foundation Framework.

    
asked by anonymous 10.06.2016 / 14:25

3 answers

0

I found a solution to remove the arrow using the Foundation .

Inside the foundation.css file, I commented on the line background-image , and added -webkit-appearance: none !important;

select {
  -webkit-appearance: none !important;
  -webkit-border-radius: 0px;
  background-color: #fafafa;
  /*background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);*/
  background-position: 100% center;
  background-repeat: no-repeat;
  border: 1px solid #cccccc;
  padding: 0.5rem;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.75);
  line-height: normal;
  border-radius: 0;
  height: 2.3125rem; 
}
    
15.06.2016 / 14:40
3

See Working:

    select {
      -webkit-appearance: none;
      -moz-appearance: none;
      text-indent: 1px;
      text-overflow: '';
    }
<select class="backcolorselect" id="st" name="">
    <option class="backcolorselect" value="Sim">Sim</option>
    <option class="backcolorselect" value="Não">Não</option>
</select>
    
10.06.2016 / 15:07
3

As stated by the @David in comments you can use jQuery for this, seeing that only with CSS you would have some problems with the various browsers.

It would look like an example:

jQuery(document).ready(function () {    
    var widthOfSelect = $("#select").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#select').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="select">
    <option class="backcolorselect" value="Sim">Sim</option>
    <option class="backcolorselect" value="Não">Não</option>
</select>

If you want more options, I will leave below the question link in SOen.

Select removing dropdown arrow

    
10.06.2016 / 15:27