Имеет ли текстовое преобразование: капитализировать работу для элементов <option>, и если да, то в каких браузерах?

У меня есть элемент <select>, в котором я хотел бы загладить текст, отображаемый в каждом теге <option>.

Например, мне бы хотелось, чтобы 2 значения здесь были Bar и Baz (не bar и baz)

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

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

Это не работает в моем Chrome (14.0.835.202), но работает в моих Firefox (8.0) и IE 8.

Изменить: добавлен тег <style> для ясности

Ответ 1

Как уже упоминалось, в настоящее время ошибка в Chrome. Код ниже - это правильный способ сделать то, что вы просите:

select option {text-transform:capitalize}

Здесь рабочая скрипка для демонстрации (просмотр в чем-то отличном от Chrome)

Дополнительная информация:

Я думаю, вы также обнаружите, что вышеупомянутый метод не работает и в Safari. Если вы хотите использовать кросс-браузер, JavaScript будет вашим единственным вариантом.

Если вы открыты для него, вот простой пример jQuery:

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

И рабочая скрипка.

Ответ 2

Это будет работать во всех браузерах:

select {text-transform:capitalize}

Ответ 3

Вы можете использовать небольшой jQuery script, чтобы он тоже работал в Chrome:

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