2

Tenho um select option com vários países eu criei o CSS para tirar o estilo padrão dele nos navegadores.

Estou com dois problemas, um preciso tirar aquele fundo azul quando passo por cima de cada opção preciso que fique só o texto e que sim ao mudar de opção mude a cor do texto só.

inserir a descrição da imagem aqui

O segundo problema e o overflow no google chrome não me aparece que e como eu pretendo, mas no firefox continua aparecer.

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>

1
  • Mais porque você está usando as propriedades? overflow-x :hidden; overflow-y: hidden; overflow: hidden; Retire elas que o chrome vai criar o scroll automaticamente. 26/07/2017 às 11:37

2 Respostas 2

1

Relativamente a alterar o fundo do select quando navega as opções, não é possível fazê-lo.

No entanto, pode usar bibliotecas como o select2 ou o selectize para estilizar o select como desejar.

Segue um exemplo usando 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

Não sei se é isso que queres porém creio que a parte de alterar apenas a cor do texto quando o mouse passa por cima acho que funcionaria com o Hover.

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

Porém a parte do Overflow não sei informar ao certo o que pode ser.

Edição

.select_pt option:checked {
    font-weight: bold;
    font-size: 13px;
    background:#ffffff;
}
16
  • O meu prolema de aparecer esse fundo nao e ao passar o mouse por cima mas sim quando clico numa opção fica esse fundo ou entao ao mudar as opções pelas setas do teclado aparece sempre esse fundo 26/07/2017 às 11:04
  • @CésarSousa entendi errado desculpe, creio que então na parte onde esta o checked deves trocar o backgroud pela cor que deseja, irei atualizar a resposta para mostrar 26/07/2017 às 11:24
  • fiz isso mas mantem sempre o azul nao muda para branco eu quero que fique sem nehnhum fundo que passe as opcoes mas que mostro so o texto 26/07/2017 às 11:44
  • @CésarSousa Supostamente do jeito que mostrei ele mostraria um fundo branco porém não entendo o porque não funcionou, farei uns testes e verei 26/07/2017 às 11:45
  • isto e estranho porque se eu tirar do select o size="5" ele ja fica sem fundo porem so mostra uma opcao assim e eu quero que mostre varias como tem na imagem 26/07/2017 às 11:46

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 .