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;
}
Acabei de me deparar com esta questão, e aqui está o que funciona no Firefox e no Chrome (pelo menos):
A opção Desabilitado impede que a opção <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:
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:
Algo parecido com isto:
HTML:
<select id="choice">
<option value="0" selected="selected">Choose...</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
CSS:
#choice option { color: black; }
.empty { color: gray; }
JavaScript:
$("#choice").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty")
});
$("#choice").change();
Exemplo de trabalho: