How do I make the OPTIONS list of a SELECT transparent?

Question

My form has the inputs with the placeholderin white and background transparent, to make everything uniform I need to put the select field in the same style; background transparent and font in white, but if I use;

select option {
    color: white;
}

the options when displayed disappear as in the image below.

I have tried to put only the option selected with;

select option:selected {
    color: white;
}

Only I didn’t get a hit.

The options would be:

1. Leave the color of :selected white, so you wouldn’t have to touch option

2. Leave the option transparent (which does not seem possible)

I’m using the framework Bulma and the structure of HTML is as follows::

<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>

Answer 1

After searching a little, I couldn’t find any solution that works with all browsers, specifically with Google Chrome.

This is because of how the Browser renders the component SELECT.

If you can use Javascript, a solution would be to emulate a SELECT through an existing Plug-In (such as Chosen or the Select2), or create your own emulation.

Below is an implementation using 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>

In addition, you can change the color of the item that is selected or what is with MOUSEOVER using:

 /* 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 */
}

I hope I’ve helped.

Answer 2

Would this be:

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>

Answer 3

You need to make the background color of the option transparent too, example

select option {
    background-color: x;
}

Once this is done, the white color of the option will be visible.