JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

<form method="post" action="">
        <label>
            <select name="depto" id="selectDepto">
              <option selected value=""> Busca por departamento</option>
              <option value="administração">Administração</option>
              <option value="comercial">Comercial</option>
              <option value="consultoria">Consultoria</option>
              <option value="controle de qualidade">Qualidade</option>
              <option value="desenvolvimento">Desenvolvimento</option>
              <option value="diretoria">Diretoria</option>
              <option value="endomarketing">EndoMarketing</option>
              <option value="financeiro">Financeiro</option>
              <option value="implantação">Implantação</option>
              <option value="marketing">Marketing</option>
              <option value="pré implantação">Pré-Implantação</option>
              <option value="recursos humanos">Recursos Humanos</option>
              <option value="tecnologia">Tecnologia</option>
              <option value="treinamento">Treinamento</option>                  
            </select>
       </label>
</form>

CSS

form select{
    background: transparent;
    border: 1px solid #DDDDDD;
    border-radius: 5px 0 0 5px;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2) inset;
    color: #999; 
    font-size: 14px;
    height: 45px;  
    padding: 0 5px;
    width: 250px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none; 
    background: url("http://www.iconesbr.net/iconesbr/2009/06/8383/8383_32x32.png") 100% / 17% no-repeat;
    text-transform: uppercase;
    select::-ms-expand { display: none; }/* Remove seta padrão do IE*/ 
    
}

select::-ms-expand {
  display: none;
}