Подстрока стиля в HTML <option>из <select>

Question

Стилизовать элементы в списке опций просто: используйте определение 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"? Моя идея состояла в том, чтобы использовать фоновое изображение и корректно смещать его. Но это кажется сложным. У кого-нибудь есть отличная идея, как это сделать? Браузер будет текущим FF. HTML и стиль могут быть сгенерированы на лету на сервере.

Answer 1

Вы не можете получить такое гранулирование со своими стилями в стандартном списке выбора. Это потребовало бы динамической замены (созданной и управляемой с помощью 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-логика перехватывает щелчки на элементах списка и передает их в скрытое меню выбора, которое затем выбирает соответствующую опцию, так что отправка формы переносит решения пользователей.

<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>

Answer 2

Ближайший, к которому я могу приблизиться, все еще жалок.Тем не менее, я выложу его.

Используя расположение фонового изображения:

<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:

Answer 3

Это невозможно с HTML и CSS .. и с simple Javascript .. все, что вы можете использовать (я имею в виду динамическое / статическое содержимое). В конечном итоге ... вы должны написать стиль в пределах span или элемента div ... здесь ограничение заключается в том, что стиль должен быть применен к списку, а Option не позволяет Span или DIV как дочерние элементы ..

Альтернативой является (как предложено Джонатаном ) использование совершенно другого события javascript .. которое ведет себя как <Select>, но не выбирается ..

Но во всех отношениях это требует больше усилий (нагрузка на дизайнера, а также на браузер), чем обычно, потому что это не основное требование раскрывающегося списка ..

Answer 4

Я не верю, что это можно сделать только с помощью CSS. Вам придется использовать JavaScript.