Имеет ли текстовое преобразование: капитализировать работу для элементов <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/