Подстрока стиля в HTML <опция> от <выбор>
Моделирование объектов в списке опций легко: используйте определение CSS и примените его:
<select>
<option>Option 1</option>
<option style="color: #F00; font-weight: bold; padding-left:2em;">Option 2</option>
<option>Option 3</option>
<option style="color: #00F;">Option 4</option>
<option>Option 5</option>
</select>
Но каков прием, если я просто хочу выделить части строки? Например, в этом списке от 5-го объекта просто подстрока "ион 5"? Моя идея состояла в том, чтобы использовать фоновое изображение и смещать его правильным способом. Но это, кажется, хитро. У кого-либо есть изящная идея, как сделать это? Браузер был бы током И следующие, HTML и стиль могут быть быть сгенерированными на лету в бэкенде.
4 ответа
Самое близкое, к чему я могу подойти, все еще жалкое. Тем не менее, я отправлю его по почте.
Использование позиционирования фонового изображения:
<select>
<option></option>
<option>Option 1</option>
<option style="color: #000;
background: #ffffff
url(http://i49.tinypic.com/15ybyaw.jpg)
repeat-y 2em 0px"
>Option 2</option>
<option>Option 3</option>
</select>
Оно рендерит только в FF3.5, а не на IE, Chrome и т.д. А получить точное положение подсветки - это еще один коварный бизнес. Наверное, лучше работает с шрифтами фиксированной ширины.
Вот скриншот FF:
Невозможно получить такую гранулярность со своими стилями в стандартном списке выбора. Для этого потребуется динамическая замена (созданная и управляемая с помощью Javascript и с помощью Javascript), чтобы встать на место стандартного списка и передавать значения туда и обратно.
Например, следующее немного более наглядно иллюстрирует мою точку зрения. Вам понадобился бы совершенно другой набор элементов HTML, которые вы могли бы стилизовать таким образом, например, div, содержащий неупорядоченный список. Обратите внимание, что вариант 6 выделен жирным шрифтом.
<div id="list-simulation">
<ul>
<li>Option 4</li>
<li class="selected">Opt<strong>ion 5</strong></li>
<li>Option 6</li>
</ul>
</div>
Прикрепленная Javascript-logic перехватывает щелчки по элементам списка и передает их в скрытое меню выбора, которое затем выбирает соответствующую опцию, чтобы форма-отправка переняла решения пользователей.
<select name="real-list">
<option value="1">Option 4</option>
<option value="2" selected="selected">Option 5</option>
<option value="3">Option 6</option>
</select>
Это невозможно при использовании HTML и CSS ... и при использовании простого Javascript ...
что бы вы ни использовали (я имею в виду динамический/статический контент) В конечном счете ... вы должны написать стиль в диапазоне или div элементе ... здесь ограничение - стиль должен быть сделан к списку и Option не разрешает Span или DIV в качестве дочерних элементов ...
Альтернативой является (как предлагает Джонатан) использование совершенно другого события javascript ... которое ведет себя как <Выбор>, но не выбирается ...
Но во всех отношениях требует больше усилий (нагрузка на дизайнера, а также на браузер), чем обычно, потому что это не является основным требованием выпадающего списка ...
...Я не верю, что это можно сделать только с помощью CSS. Вам придется использовать JavaScript.