样式化或替换标准选择元素答案

【问题标题】：Styling or Replacing the Standard Select Element样式化或替换标准选择元素
【发布时间】：2011-11-11 09:13:59
【问题描述】：

我进行了大量搜索，但似乎无法找到我认为可能是一个相当直截了当的问题的答案。

我想在我的页面上设置一个选择的样式，使其基本上是一个绿色方块，所选数字 (1 - 20) 以白色显示在中间。

这是我目前所拥有的：

select
{
    width: 1.2em;
    height: 1.5em;
    background-color: #3CB23C;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 0.06em outset #666;

    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 4em;
}

到目前为止看起来还不错，但我找不到任何关于如何删除箭头以使其看起来像一个带有数字的普通框。

（在我收到一千条关于我为什么不应该这样做的回复之前...我知道。我以前都读过！！我不是让你告诉我我是否应该我是在问我如何做！它适用于移动设备通过点击绿色框然后从结果列表中选择数字来选择数字的应用程序。很明显该框的作用，因此无需在此处进入无障碍对话）。

我已经阅读了很多关于无法非常轻松地为选择和其他表单元素设置样式的内容，并且我还阅读了很多类似的答案：

"你不能设置自己的控件样式，但是使用 JavaScript 你可以隐藏它并创建一个 JavaScript 功能控件来像一个水滴一样下列表。当一个项目被选中时，它会选择下拉菜单中的项目下列表。”

但令人惊讶的例子很少。

那么有没有人有办法为箭头设置样式以使其“消失”，或者如果不能简单地使用 CSS 来删除箭头，那么有没有人有任何很好的例子来说明如何使用 Javascript 复制这种效果？

谢谢

【问题讨论】：

如果你想要一个例子，请查看 jQuery mobile。
不错的 Sime。找到这个：jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/selects/…

标签： javascript jquery css select

【解决方案1】：

这里有一个小技巧，你可以如何做到这一点。想法是用 owerflow:hidden 隐藏arroes；分区。

<style>
div{
    float:left;
    width:90px;
    height:100px;
    overflow:hidden;
}
select
{
    float:left;
    width: 3.2em;
    height: 1.5em;
    background-color: #3CB23C;
    margin-left:-8px;

    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 4em;
}
</style>
<div>
    <select>
        <optgroup label="Server-side languages">
        <option>21</option>
        <option>22</option>
        </optgroup>
        <optgroup label="Client-side languages">
        <option>23</option>
        <option>25</option>
        </optgroup>
    </select>
</div>

【讨论】：

【解决方案2】：

在 wekbit 浏览器中，您可以使用：

select {
  -webkit-appearance: none;
}

它在 ie 或 firefox 中不起作用，即使使用 -moz-appearance: none; 或 appearance: none;

jsFiddle

但是恕我直言，最好这样做：为自定义元素设置样式并使用 jQuery 为它们设置动画。然后添加一个隐藏的选择，该选择用上面的元素填充 jQuery。有点长，但这样你就不会遇到太多浏览器兼容性问题了。

【讨论】：

你的意思是Mozilla浏览器：P。当然，它是 WebKit 中的 -webkit-appearance。
哇，好点。有一个-moz-appearance (developer.mozilla.org/En/CSS/-moz-appearance)，但正如 JSFiddle 中的一些人所展示的那样，它不起作用！悲伤的时光。
"样式自定义元素并使用 jQuery 为它们设置动画。" - 太好了，我非常乐意使用 Javascript 来完成它，（程序的其余部分无论如何都在 js 中，所以不会有更多伤害！）但我真的很喜欢如何做到这一点的示例/教程。有什么想法可以找到吗？

【解决方案3】：

@pinouchon 的回答对于如何移除箭头是正确的。如果您对下拉部分的默认样式没问题，您可以为自己节省大量工作（键盘使用、可访问性问题、跨平台行为、mousedown-vs.-click-vs.click 并按住, ...)。

但是，虽然您可以使用-webkit-appearance/-moz-appearance 覆盖最初显示的部分的样式，但似乎没有任何方法可以重新设置下拉部分的样式。在这种情况下，您需要使用 JavaScript 和插入的 HTML 元素创建一个虚假的选择菜单，并希望您涵盖上述所有用例。

我们的团队已经开始使用后一种方法的一个例子是Felix Nagel's selectmenu jQuery UI plugin。

【讨论】：