How to remove the background in a select option?

Asked

Viewed 1,054 times

2

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

I have two problems, a need to take out that blue background when I step over each option I need to stay just the text and that yes when changing option change the color of the text only.

inserir a descrição da imagem aqui

The second problem is the overflow in google Chrome does not appear to me that and how I intend, but in firefox continues to appear.

inserir a descrição da imagem aqui

.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

  • More because you’re using the properties? overflow-x :Hidden; overflow-y: Hidden; overflow: Hidden; Remove them and Chrome will create the scroll automatically.

2 answers

1

With regard to amending the select when browsing the options, it is not possible to do so.

However, you can use libraries like Select2 or the selectize to stylize the select as you wish.

Follow 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>
<script src="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>

0

I don’t know if that’s what you want but I think the part about changing only the color of the text when the mouse goes over I think it would work with the Hover.

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

But the Overflow part I don’t know exactly what it might be.

Editing

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

  • My problem of showing this background is not to pass the mouse over but when I click on an option it is this background or when changing the options by the arrow keys on the keyboard always appears this background

  • @Césarsousa got it wrong sorry, I think then in the part where this the checked you must exchange backgroud for the color you want, I will update the answer to show

  • I have done this but keep the blue does not change to white I want it to be without any background that passes the options but I show only the text

  • @Césarsousa Supposedly the way I showed it would show a white background but I don’t understand why it didn’t work, I’ll do some tests and I’ll see

  • this is strange because if I take the select size="5" it is already without background but only shows an option like this and I want to show several as it has in the image

  • @Césarsousa face I tested here and there is logic why it is marked blue even taking all the options of "blue" code

  • <select id="select_pt" class="select_pt" size="4"> if I take this size="4" is without background with it has background also not see logic but and what happens

  • but if you understand the background appears only when you choose the option to select itself has no background that I got appears and a background in the text of the option when I choose it

  • By removing the size="4" the option I gave works when an option is Selected she keeps the white background but need to check when changing with the mouse arrows @Césarsousa

  • I will test this not tested when taking the size 4 but if taking this size only shows an option and I want to show more than an option as in the image the idea of the size and this realizes

  • @Césarsousa Even tested?

  • yes already tested when selected an option appears only the text of the option without background with nothing but also appears only one option

  • Right then it’s kind of what you want right? only with 4 lines and when the mouse passes and moves with the keys tbm does not appear anything in the background @Césarsousa ?

  • right this same as this in the image but without that background that taking out the size does it but only gets an option to show and I need like this in the image

  • @Césarsousa Now I don’t know what else to do because it didn’t even work with Hover

  • I don’t know why size does it

Show 11 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.