How to leave the OPTIONS list of a SELECT with transparent background?

Question

How to leave the OPTIONS list of a SELECT with transparent background?

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

2

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

select option {
    color: white;
}

The options when displayed disappear as in the image below.

I'vetriedtoputonlytheselectedoptionwith;

selectoption:selected{color:white;}

Ijustdidnotgetresults.

Theoptionswouldbe:

Leavethecolorof:selectedwhite,soyouwouldnothavetotouchtheoption

Leaveoptiontransparent(whichdoesnotseemtobepossible)

I'musingtheframework Bulma and the HTML structure 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>

javascript html css3

asked by anonymous 19.01.2017 / 14:49

3 answers

Disable "sql-mode = only_full_group_by" Focus on the last character Jquery

score 3 · Answer 1

After a little research, I did not find any solution that works with all browsers, specifically with Google Chrome.

This is because Browser renders the SELECT component.

If you can use JavaScript, one solution would be to emulate a SELECT through an existing Plug-In (such as Chosen or 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><scriptsrc="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 have helped.

score 1 · Answer 2

It would be this:

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>

score 0 · Answer 3

0

You need to leave the background color of the option transparent too, eg

select option {
    background-color: x;
}

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

19.01.2017 / 15:02