Remove arrow from "select"

Question

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 arrow pointing down from select, some help in CSS ?

This using the Zurb Foundation Framework.

Answer 1

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>

Answer 2

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

That would be 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>
<select id="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 on Soen.

Select removing dropdown Arrow

Answer 3

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

Inside the archive Foundation.css, 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; 
}