How do I get the background on a select option?

Question

How do I get the background on a select option?

Navigation

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

2

I have select option with several countries I created CSS to take the default style of it in browsers.

I have two problems, I need to take out that blue background when I step over each option I need the text to be left alone and when changing the option change the color of the text only.

Thesecondproblemandoverflowingooglechromedoesnotappeartomeasitisintended,butinfirefoxitstillappears.

.select_pt {
  width: 200px;
  overflow-x: hidden;
  overflow-y: hidden;
  overflow: hidden;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  border-left: none;
  border-right: none;
  margin-top: 7px;
  text-align: center;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

.select_pt option {
  text-align: center;
  color: black;
  font-weight: bold;
}

.select_pt option:checked {
  font-weight: bold;
  font-size: 13px;
  color: blue;
}

.select_pt option:not(:checked) {
  color: gray;
}

<select id="select_pt" class="select_pt" size="4">
    <option value="alemanha">Alemanha</option>
    <option value="austria">Áustria</option>
    <option value="belgica">Bélgica</option>
    <option value="bulgaria">Bulgária</option>
    <option value="chipre">Chipre</option>
    <option value="croacia">Croácia</option>
    <option value="dinamarca">Dinamarca</option>
    <option value="eslovaquia">Eslováquia</option>
    <option value="eslovenia">Eslovénia</option>
    <option value="espanha">Espanha</option>
    <option value="estonia">Estónia</option>
    <option value="finlandia">Finlândia</option>
    <option value="franca">França</option>
    <option value="grecia">Grécia</option>
    <option value="holanda">Holanda</option>
    <option value="hungria">Hungria</option>
    <option value="irlanda">Irlanda</option>
    <option value="italia">Itália</option>
    <option value="letonia">Letónia</option>
    <option value="lituania">Lituânia</option>
    <option value="luxemburgo">Luxemburgo</option>
    <option value="malta">Malta</option>
    <option value="polonia">Polónia</option>
    <option value="portugal" selected >Portugal</option>
    <option value="reino_unido">Reino Unido</option>
    <option value="republica_checa">Republica Checa</option>
    <option value="romenia">Roménia</option>
    <option value="suecia">Suecia</option>
</select>

html css

asked by anonymous 26.07.2017 / 11:12

2 answers

How to show result via ajax and jquery without refresh on page How to change the size of a screen through an event in C # WPF

score 1 · Answer 1

In order to change the select background when browsing options, can not do it .

However, you can use libraries like select2 or the selectize to style select as desired.

Here's an example using select2 :

jQuery(document).ready(function($){
    $('select').select2({width:100});
});

.select2-results__options > li {
  background-color: transparent !important;
  color: black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<select>
    <option value="alemanha">Alemanha</option>
    <option value="austria">Áustria</option>
    <option value="belgica">Bélgica</option>
    <option value="bulgaria">Bulgária</option>
    <option value="chipre">Chipre</option>
    <option value="croacia">Croácia</option>
    <option value="dinamarca">Dinamarca</option>
    <option value="eslovaquia">Eslováquia</option>
    <option value="eslovenia">Eslovénia</option>
    <option value="espanha">Espanha</option>
    <option value="estonia">Estónia</option>
    <option value="finlandia">Finlândia</option>
    <option value="franca">França</option>
    <option value="grecia">Grécia</option>
    <option value="holanda">Holanda</option>
    <option value="hungria">Hungria</option>
    <option value="irlanda">Irlanda</option>
    <option value="italia">Itália</option>
    <option value="letonia">Letónia</option>
    <option value="lituania">Lituânia</option>
    <option value="luxemburgo">Luxemburgo</option>
    <option value="malta">Malta</option>
    <option value="polonia">Polónia</option>
    <option value="portugal" selected >Portugal</option>
    <option value="reino_unido">Reino Unido</option>
    <option value="republica_checa">Republica Checa</option>
    <option value="romenia">Roménia</option>
    <option value="suecia">Suecia</option>
</select>

score 0 · Answer 2

I do not know if this is what you want however I think the part of just changing the color of the text when the mouse goes over it seems to work with Hover .

.select_pt:hover {
    background:#ffffff;
    color:#000000;
}

But the part of Overflow I do not know for sure what it can be.

Issue

.select_pt option:checked {
    font-weight: bold;
    font-size: 13px;
    background:#ffffff;
}