Html 选择选项下划线

Question

我遇到了在 html 中为元素下划线的问题

请在此处找到代码：

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

jsFiddle

Answer 1

当涉及到跨浏览器时，在这种情况下，大多数 css 不能应用于像 select 这样的原生控件。另一种方法是在幕后使用 jquery-ui 代替它们隐藏选择元素并显示类似的外观，通常它们是 <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 演示： Working Demo

Answer 2

虽然可以通过 HTML 中的一些 hack 或在它们上添加 Javascript 来设置 <select> 元素和 <option> 元素的样式，但我绝不建议这样做。

可访问性始终是网络上的一个问题，如果将这种标准化的输入方法（用户可以选择一个选项）转变为完全不同的东西，只是为了视觉吸引力，您将无助于用户。

有几个人写过关于这个主题的文章，我同意他们所有人的观点：“不要管选择。如果必须的话，给可样式化的东西设置样式。” https://www.aaron-gustafson.com/notebook/native-vs-stylable-tug-of-war/

如果您仍想设置选择的样式（不是选项，仅使用 CSS 是不可能的），FilamentGroup 提供了一个很棒的库，您可以将其放入您的项目中：https://github.com/filamentgroup/select-css/

Answer 3

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

参考这个答案How to style the option of a html "select"?