设置或替换标准选择元素

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功能控件以充当下拉列表。选择一个项目后，它将在下拉列表中选择该项目。”

但是令人惊讶的是，很少有例子。

那么，有没有人可以通过某种方式来设置箭头的样式，使其“消失”呢？或者，如果不可能仅使用CSS来删除箭头，那么有没有人有很好的例子来说明如何使用Javascript复制这种效果？

谢谢

Answer 1

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

select {
  -webkit-appearance: none;
}

即使在-moz-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的selectmenu jQuery UI插件 。

Answer 3

这里有个小技巧，您可能会如何做。 想法是用owerflow隐藏Arroes：隐藏； div。

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