2

Como adiciono um titulo ao select que ele apareça nas opções e suma quando for selecionar?

Sei que parece que é uma duplicada, mas o problema é que não encontrei o que gostaria exatamente, a opção selected disabled funciona mas não cumpre o que quero. Utilizando o mesmo um exemplo que vi aqui no stackoverflow com selected disabled :

<select>
  <option disabled selected>- Selecione -</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>

Porém, o que gostaria de fazer é que o título "- Selecione -" ficasse como a propriedade placeholder e quando eu fosse selecionar o campo "- Selecione -" o mesmo não aparecesse nas opções e sumisse. Assim:

inserir a descrição da imagem aqui

1
  • Consegui "ocultar" as opções com disabled mas não surtiu o mesmo efeito do seu print, para a opção padrão. Veja se te ajuda: select:focus > option:disabled {display:none;} Commented 3/04/2018 às 15:55

3 Respostas 3

2

Vc também consegue ocultar essa opção com algumas regras em CSS se preferir.

Pensando na experiencia do usuário (UX) e se o campo não for obrigatório no caso do usuário mudar de ideia ele ainda deve ter a opção de desmarcar a opção que escolheu, por isso acredito que nesse caso a opção deve constar dentro do campo!

Para isso eu faria desse jeito:

select option[data-default] {
  color: #999; /* cor simulando que o campo está desabilitado depois que abre o select */
}
<select>
  <option selected data-default>- Selecione -</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>


Mas se vc realmente que "sumir" como o "label" aqui tem uma opção mesclando o que vc fez com CSS simulando um Placerholder. Só que nessa opção o usuário não pode voltar atras, uma vez o campo selecionado ele não tem a opção de desmarcar.

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>- Selecione -</option>
  <option value="Volvo">Volvo</option>
  <option value="Mercedes">Mercedes Bens</option>
</select>

Nassa resposta do StackOverflow gringo tem mais informações e variações. https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box

2
  • hugocsl realmente no meu caso o campo não é obrigatório então vou mesclar suas duas respostas, muito obrigado! Pax!
    – HaddockAC
    Commented 3/04/2018 às 18:24
  • @vulgogandini legal! Lembre-se de sempre levar em consideração o UX nesses casos, pois ele pode abandonar o formulário ou desistir da compra por exemplo se não tiver controle total do que está fazendo. Boa sorte com o projeto []´s
    – hugocsl
    Commented 3/04/2018 às 18:31
2

Penso que o que você quer seja isso:

<select>
  <option selected hidden >- Selecione -</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>

Para fazer isso adicione "hidden" na option do selecione!

1
  • Muito legal. Quando vi a pergunta logo esperei por uma resposta com jQuery. :o Commented 3/04/2018 às 17:47
0

Consegui o mesmo efeito da sua imagem utilizando javascript para alterar o texto da opção que está selecionada e desabiltada.

Utilizei o css abaixo para ocultar as opções desabilitadas quando o select estiver expandido:

select:focus > option:disabled {display:none;}

Exemplo:

var select = document.getElementById("teste");

select.addEventListener("click", function(){
    var options = this.options
    for(i=0;i<options.length;i++){
      if(options[i].disabled && options[i].selected )
        options[i].text="";
    }
});
select:focus > option:disabled {
  display:none;
}
<select id="teste">
  <option disabled selected>- Selecione -</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>

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 .