Como faço para um espaço de 'select' caixa?

I'm usando placeholders para entradas de texto, o que está funcionando muito bem. Mas I'gostaria de usar um marcador de lugar para minhas caixas de seleção também. Claro que posso simplesmente usar este código:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

Mas o 'Seleccione a sua opção' está em preto em vez de cinzento claro. Então minha solução poderia ser baseada em CSS. jQuery também está bem.

Isto só torna a opção cinzenta no menu suspenso (por isso, depois de clicar na seta):

option:first {
    color: #999;
}

A questão é: Como é que as pessoas criam marcadores de lugar nas caixas de seleção? Mas já foi respondido, saúde.

E usando isto resulta que o valor selecionado seja sempre cinza (mesmo depois de selecionar uma opção real):

select {
    color: #999;
}
Peter Mortensen
Pergunta editada :em
Programação
html css html-select placeholder
27º abril 2011 в 1:39
15 vistas
Solução

Um não-CSS - sem resposta JavaScript/jQuery:


<select>
    Select your option
    Durr
Peter Mortensen
Resposta editada :em
Comentários (20)

Acabei de me deparar com esta questão, e aqui está o que funciona no Firefox e no Chrome (pelo menos):

select:invalid { cor: cinzento; }



    Please Choose...
    Abrir quando energizado (a maioria das válvulas faz isto)
    Fechado quando energizado, auto-abre quando a energia é cortada

A opção Desabilitado impede que a opção `seja selecionada tanto com o mouse quanto com o teclado, enquanto que apenas utilizando'display:none'' permite que o usuário ainda selecione através das setas do teclado. O estilo 'display:none' apenas faz a caixa de listagem parecer 'legal'.

Nota: Utilizando um atributo "valor" vazio na opção "placeholder" permite que a validação (atributo obrigatório) funcione em torno de ter o "placeholder", então se a opção não for alterada, mas for obrigatória, o navegador deve solicitar ao usuário que escolha uma opção da lista.

Actualização (Julho 2015):

Este método está confirmado a funcionar nos seguintes browsers:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (o espaço reservado é visível no dropdown, mas não é selecionável)
  • Microsoft Internet Explorer - v.11 (o espaço reservado é visível no dropdown mas não pode ser selecionado)
  • Projeto Spartan - v.15.10130 (o espaço reservado é visível no dropdown, mas não é selecionável)

Actualização (Outubro 2015):

Eu removi o style="display: none" em favor do atributo HTML5 hidden que tem amplo suporte. O elemento hidden tem características similares a display: none no Safari, Internet Explorer, (Projeto Spartan precisa ser verificado) onde a opção é visível em dropdown, mas não é selecionável.

Actualização (Janeiro 2016):

Quando o elemento select é required permite a utilização da pseudo-classe :invalid CSS, o que permite que você estilize o elemento select quando em seu estado "placeholder'. O :invalid funciona aqui por causa do valor vazio na opção de espaço reservado `opção'.

Uma vez que um valor tenha sido definido, a pseudo-classe :invalid' será descartada. Você também pode utilizar opcionalmente o:valid' se assim desejar.

A maioria dos navegadores suporta esta pseudo-classe. Internet Explorer 10 e posteriores. Isto funciona melhor com elementos com estilo select personalizados; em alguns casos (Mac no Chrome / Safari) você precisará alterar a aparência padrão da caixa select para que certos estilos sejam exibidos, ou seja, background-color e color. Você pode encontrar alguns exemplos e mais sobre compatibilidade em developer.mozilla.org.

Aparência de elementos nativos Mac em Cromo:

Usando o elemento de borda alterado Mac em Cromo:

Peter Mortensen
Resposta editada :em
Comentários (15)

Algo parecido com isto:

HTML:


<select id="choice">
    Choose...
    Something
    Something else
    Another choice
Peter Mortensen
Resposta editada :em
Comentários (4)