2

Meu formulário possui os inputs com o placeholderna cor branca e background transparente, para deixar tudo uniforme eu preciso colocar o campo select no mesmo estilo; background transparente e font na cor branca, porém se eu usar;

select option {
    color: white;
}

as opções quando exibidas desaparecem como na imagem abaixo.

demonstração de caso

Já tentei colocar apenas a opção selecionada com;

select option:selected {
    color: white;
}

Só que não obtive resultado.

As opções seriam:

  1. Deixar a cor do :selected na cor branca, assim não precisaria mexer nos option

  2. Deixar o option transparente (o que não parece ser possível)

Estou utilizando o framework Bulma e a estrutura do HTML é a seguinte:

<p class="control is-expanded">
   <select class="select" name="assunto" required >
      <option value="selecione" selected="" disabled="">Selecione o assunto</option>
      <option value="selecione">Outra opção</option>
      ...
   </select>
</p>
3
  • Você conseguiu pintar o fundo desse select de transparente? Commented 19/01/2017 às 13:54
  • sim @EdsonHoracioJunior você pode ver pelo print que eu postei, conseugi colocar o select transparente, as opções não...
    – RFL
    Commented 19/01/2017 às 13:59
  • As opções estão com fundo branco, não transparente. Commented 19/01/2017 às 14:00

3 Respostas 3

3

Após pesquisar um pouco, não achei nenhuma solução que funcione com todos os browsers, especificamente com o Google Chrome.

Isso se dá ao fato de como o Browser renderiza o componente SELECT.

Caso você possa utilizar JavaScript, uma solução seria emular um SELECT através de um Plug-In existente (como o Chosen ou o Select2), ou criar a sua própria emulação.

Abaixo uma implementação utilizando o Chosen.

$('#assunto').chosen();
body{
  background:#000;
  background-image: url(http://loremflickr.com/420/440);
}

.chosen-container{
  width:400px !important;
}

a.chosen-single, .chosen-drop, .chosen-container .chosen-results{
  background:none !important;
  color:#fff !important;  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" />

<p class="control is-expanded">
   <select class="select" id="assunto" name="assunto" required >
      <option value="selecione" selected="" disabled="">Selecione o assunto</option>
      <option value="selecione">Outra opção1</option>
      <option value="selecione">Outra opção2</option>
      <option value="selecione">Outra opção3</option>
   </select>
</p>

Além disso, você pode alterar a cor do item que está selecionado ou do que está com MOUSEOVER usando:

 /* Cor do "option" atualmente selecinoado */
.result-selected{
  background:green !important;  /* cor que quiser e outras propriedades */
}

 /* Cor do "option" com ":hover" */
.highlighted{
  background:red !important; /* cor que quiser e outras propriedades */
}

Espero ter ajudado.

1

Seria isto:

body{
  background:#000;
}
select{
  background:transparent;
  color:#fff;
}
select option{
  color:#000;
  background:red;
}
<p class="control is-expanded">
   <select class="select" name="assunto" required >
      <option value="selecione" selected="" disabled="">Selecione o assunto</option>
      <option value="selecione">Outra opção1</option>
      <option value="selecione">Outra opção2</option>
      <option value="selecione">Outra opção3</option>
   </select>
</p>

4
  • tente colocar o select option com background transparente...
    – RFL
    Commented 19/01/2017 às 14:04
  • Receio que isto não seja possível. Caso seu background seja uma cor sólida, seria mais fácil pintar o background da select option com esta cor Commented 19/01/2017 às 14:08
  • Editei a pergunta com a opções que temos para resolver o problema.
    – RFL
    Commented 19/01/2017 às 14:11
  • se é transparente porque no teu exemplo ai está tudo preto ?
    – Elton
    Commented 11/12/2018 às 13:06
0

Você precisa deixar a cor de fundo da opção transparente também, exemplo

select option {
    background-color: x;
}

Feito isso, a cor branca da opção ficará visível.

1
  • tente colocar transparente ou alguma cor com opacidade baixa...
    – RFL
    Commented 19/01/2017 às 14:06

Você deve fazer log-in para responder a esta pergunta.

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