3

Código:

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

Preciso remover a seta que aponta para baixo do select, alguma ajuda em CSS ?

inserir a descrição da imagem aqui

Isto usando o Framework Zurb Foundation.

0

3 Respostas 3

4

Veja Funcionando:

    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>

2
  • No IE também não funciona, acho que seria interessante adicionar em quais navegadores este código funciona.
    – Randrade
    Commented 10/06/2016 às 13:20
  • Essa solução não funcionou no IE11 Commented 10/10/2019 às 16:35
3

Como dito pelo @David nos comentários você pode usar jQuery para isso, vendo que somente com CSS você teria alguns problemas em relação aos diversos browsers existentes.

Ficaria assim um exemplo:

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>

Caso queira mais opções, deixarei abaixo o link da pergunta no SOen.

Select removing dropdown arrow

1
  • Essa solução não funcionou no IE11 Commented 10/10/2019 às 16:34
0

Achei uma solução para retirar a seta usando o Foundation.

Dentro do arquivo foundation.css, comentei a linha background-image, e adicionei -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; 
}
1
  • Essa solução não funcionou no IE11 Commented 10/10/2019 às 16:34

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .