ti-enxame.com

Text-transform: Capitalize funciona para elementos <option> e, em caso afirmativo, em quais navegadores?

Eu tenho um <select> elemento dentro do qual eu gostaria de colocar em maiúscula o texto exibido em cada <option> tag.

Por exemplo, eu gostaria que os 2 valores aqui fossem Bar e Baz (não bar e baz )

<style>
    option { text-transform: Capitalize; }
</style>

<select name="foo">
    <option value="bar">bar</option>
    <option value="baz">baz</option>
</select>

Isso não parece funcionar no meu Chrome (14.0.835.202), mas funciona no meu Firefox (8.0) e IE 8.

Editar: Adicionado <style> tag para maior clareza

21
Phil Peace

Como outros mencionaram, isso atualmente m bug no Chrome . O código abaixo é a maneira correta de fazer o que você está pedindo:

select option {text-transform:capitalize}

Aqui está m violino funcionando para demonstrar (visualizar em algo diferente do Chrome)

Informações adicionais:

Acho que você também descobrirá que o método acima também não funciona no Safari. Se você deseja uma solução para vários navegadores, o JavaScript será sua única opção.

Se você estiver aberto a isso, aqui está um exemplo simples de jQuery:

$("option").each(function() {
    var $this = $(this);
    $this.text($this.text().charAt(0).toUpperCase() + $this.text().slice(1));
});

E m violino de trabalho .

** ATUALIZAÇÃO **

Esta pergunta foi respondida originalmente em 2011. O bug mencionado acima foi eliminado, e o CSS abaixo é suficiente para capitalizar cada opção em todos os navegadores.

select {text-transform:capitalize}
23
James Hill

Isso funcionará em todos os navegadores:

select {text-transform:capitalize}
20
Ashwin

Você poderia usar um pequeno script jQuery para fazê-lo funcionar em Chrome também:

http://jsfiddle.net/p6wbf/1/

2
ptriek

selecione a opção {text-transform: capitalize}

Use o CSS acima para garantir que os valores das opções não estejam em MAIÚSCULAS. se estiverem, primeiro diminua-os usando strtolower () em PHP e o estilo funcionará perfeitamente para você.

1
Arpit Attitudish