Javascript HTML中的样式子字符串<；选项>；从a<；选择>；

选项列表中项目的样式设置很简单：使用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>

选择1
选择2
选择3
选择4
备选案文5

---

但是，如果我只想突出显示字符串的部分，那么技巧是什么呢？例如，在第5项的列表中，仅子字符串“ion 5”？我的想法是使用背景图像并以正确的方式对其进行偏移。但这似乎很棘手。有人知道怎么做吗？浏览器将是当前的FF。HTML和样式可以在后端动态生成。

在标准的选择列表中，您的样式无法获得这种粒度。这需要一个动态替换（用Javascript创建和控制）来代替标准的select，并来回反馈值

例如，下面更清楚地说明了我的观点。您必须有一组完全不同的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>

选择4
选择离子5
备选案文6

附加的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>

选择4
备选案文5
备选案文6

我不相信单凭CSS就可以做到这一点。您必须使用JavaScript。

这在HTML和CSS中是不可能的。。也不能使用simpleJavascript。。 无论您最终使用什么（我指的是动态/静态内容）。。必须在span或div元素中编写样式。。这里的限制是必须对列表执行样式，并且

选项不允许
Span
或
DIV
作为子元素

另一种选择是（如所建议的）使用完全不同的javascript事件。。其行为类似于
，但不是select

但在所有方面，它都需要比平常更多的努力（设计师和浏览器的负担），因为这不是下拉列表的基本要求。。
我能接近的东西仍然是可怜的。不过我还是会把它寄出去的

使用背景图像的定位：

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


选择1
选择2
选择3

它只在FF3.5中渲染，而不在IE、Chrome等上渲染。要获得精确的高光位置是另一件棘手的事情。使用固定宽度字体可能效果更好

以下是FF屏幕截图：


我认为javascript也不可能实现。@stealthdragon，Darrell可能在谈论创建一个替代元素来代替这个
select
。对。您必须用HTML替换选项文本。所以“选项5”将变成
选项5
@Darrel，这是行不通的。。选项不允许Span或DIV作为子元素。是的，我不确定Darrell最初的意思是什么，因为“使用JavaScript”非常模糊。创建一个伪选择框可能是唯一可行的解决方案（正如Jonathan在回答中提到的）。唯一需要考虑的是，是否值得为创建这样一个控件而付出努力。另外，我想说的是，非本机控件更有可能存在可用性问题（或者，至少是可用性差异）。尽管我怀疑它的可行性。不过我希望我错了我不认为这是社区维基。应该设置为一个问题。您能澄清一下我们如何用Javascript替换特定文本吗？这里只有字符串“ion”必须带有一些样式，并且必须在列表中。您必须创建一个看起来像选择列表但不是选择列表的全新元素。它将通过Javascript进行控制。这是实现所需视觉效果的唯一方法。此外，如果列表仅允许单个选择，则可以仅使用隐藏表单值并更新该值，而不是创建整个选择框。通常，渐进增强样式，你用JavaScript代理替换了一个真正的
框，这样当JS不可用时它仍然可以工作（只是没有很好的格式）。@bobince你说得对。我总是忘记那些非js用户；）这就是我写的：“我的想法是使用背景图像并以正确的方式偏移它。”：）但问题是图像的正确位置和宽度…@hansi:是的，你提到过使用背景图像，但你的代码没有提到。不管怎样，我的帖子是分享我的发现，而不是声称拥有这个想法。不管怎样，希望它能有所帮助P