HTML选择选项下划线

Question

我遇到了一个问题，就是如何在html中给一个元素添加下划线

请查看这里的代码：

<select>
    <option>select</option>
    <option style="text-decoration: underline;">one </option>
    <option>two</option>
    <option>three</option>
</select>

jsFiddle

的译文：

- user3584982

---

你的代码在Firefox和IE中可以运行，但在Chrome中无法运行，你想让它也能在Chrome中运行吗？ - Mudassar Saiyed

是的，我正在寻找适用于Chrome、IE和Firefox的解决方案。 - user3584982

那么你将不得不寻找一个Javascript解决方案。 - Marco Hengstenberg

这将在Firefox @ user3584982上工作。 - tabassum

文本装饰不起作用，您想尝试其他的东西吗？ - Mudassar Saiyed

Answer 1

通常情况下，您无法为选项元素设置样式。但是，有一些插件/黑客可以使用，但是您不能确定它们是否在所有平台上兼容。

请参考此答案 如何为html“select”中的选项设置样式？。

- ExpectoPatronum

---

只是想指出一个不同的线程中有相同的问题：https://dev59.com/F2oy5IYBdhLWcg3wnfYi - Marco Hengstenberg

Answer 2

当涉及到跨浏览器时，大多数 CSS 不能应用于原生控件，比如在这种情况下的 select。另一种方法是使用 jQuery-UI，在幕后隐藏 select 元素并显示一个类似的外观，通常它们是 <ul>/<li>、<span> 或 <div>。通过 CSS，您也可以改变其外观和感觉。 先决条件：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> /*Jquery Library*/
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> /*Jquery UI Library*/
<script src="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"></script> /*Jquery UI CSS*/

HTML标记：

<select>
    <option>select</option>
    <option>one</option>
    <option>two</option>
    <option>three</option>
</select>

JavaScript：

$(document).ready(function(){
     $('select').selectmenu();
})

样式表（CSS）：

li, span
{
    text-decoration: underline;  
}

.ui-selectmenu-button{
    width:150px !important;
}

JSFiddle演示：工作演示。

- Suprabhat Biswal

---

为什么你要使用jquery和jquery-ui来解决这个问题呢？仅仅为了添加一个下划线，这不是很浪费吗？我知道没有Javascript是不可能的，但一个库加上依赖关系仍然是很多数据。 - Marco Hengstenberg

@MarcoHengstenberg：我同意你的观点，外部插件确实会增加开销和依赖性，但如果你有一些最佳解决方案，我会更有信心。使用Jquery库并不是不好的选择，即使大多数专业程序员都喜欢使用外部库。如果OP正在使用Jquery库，那又该怎么办呢？因为没有提到“不要使用Jquery”。 - Suprabhat Biswal

Answer 3

虽然可以通过在HTML中进行一些黑客操作或在其中添加JavaScript来为<select>元素和<option>元素设置样式，但我永远不建议这样做。

无论何时，辅助功能都是网络上的一个问题。将此标准化的输入方法（用户可以选择选项）完全变成另一种东西只是为了视觉吸引力，这并不能帮助用户。

有一些人已经写过这个主题，我同意他们的观点：“让选择保持原样。如果必须要设置样式，请设置可设置的内容。”https://www.aaron-gustafson.com/notebook/native-vs-stylable-tug-of-war/

如果您仍然想要为选择设置样式（而不是选项，仅使用CSS无法实现），那么FilamentGroup提供了一个非常好的库，您可以将其直接添加到项目中：https://github.com/filamentgroup/select-css/

- Marco Hengstenberg