从<select> </select> </option>中的HTML <option>中设置样式子字符串

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创建和控制）代替您的标准选择，并来回馈送值。

例如，下面更清楚地说明了我的观点。您必须拥有一组完全不同的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拦截list-items上的点击，并将它们传递给隐藏的选择菜单，然后选择相应的选项，以便表单提交继承用户的决定。

<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无法做到这一点.. 简单 Javascript也不行。 无论你使用什么（我的意思是动态/静态内容）最终......你必须在span或div元素中写样式..这里的限制是样式必须在列表中完成而Option没有允许Span或DIV作为子元素..

备选方案（由Jonathan建议）使用完全不同的javascript事件..其行为类似<Select>但不是选择..

但是在所有方面它需要比平常更多的努力（设计师和浏览器的负担），因为它不是下拉列表的基本要求 ..

Answer 4

我不相信这可以单独用CSS完成。你必须使用JavaScript。