Question

我做了很多搜索，似乎无法找到我认为可能是一个相当直接的问题的答案。

我想在我的页面上设置一个选择样式，使其基本上是一个绿色正方形，所选数字（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函数控件来表现得像一个drop 下面的清单。选择项目时，它会选择放置中的项目下面的列表。“

然后令人惊讶的是很少的例子。

那么有没有人有一种方式为箭头设置样式以使其“消失”或者如果不能简单地使用CSS来移除箭头那么任何人都有如何使用Javascript复制此效果的任何好例子？

谢谢

Answer 1

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

select {
  -webkit-appearance: none;
}

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

jsFiddle

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

Answer 2

@ pinouchon的回答是正确的，如何删除箭头。如果您对部件的默认样式没有问题，那么您可以节省大量工作（键盘使用，可访问性问题，跨平台行为，mousedown-vs.-click-vs.click并保持，...）。

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

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

Answer 3

这里有一些小提示你怎么做。想法是隐藏带溢出的箭头：隐藏;格。

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

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

3 个答案: