样式化或替换标准选择元素
我做了很多搜索，似乎无法找到我认为可能是一个相当直接的问题的答案。
我想在我的页面上设置一个选择样式，使它基本上是一个绿色正方形，所选数字（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可以隐藏它并创建一个JavaScriptfunction控件，就像下拉列表一样。当选择一个项目时，它会选择下拉列表中的项目。”
但令人惊讶的是，很少有例子。
那么有没有人有一种方式pf造型箭头，以便它’消失’或如果不能使用简单的CSS删除箭头然后任何人有任何一个很好的例子，如何用Javascript复制这种效果？
谢谢
在wekbit浏览器中，您可以使用：
select { -webkit-appearance: none; }
它在ie或firefox中不起作用，即使使用-moz-appearance: none; 或appearance: none;
的jsfiddle
但恕我直言，最好这样做：样式定制元素并使用jQuery动画它们。 然后使用上面的元素添加一个用jQuery填充的隐藏选择。 它有点长，但这样你就不会有这么多的浏览器兼容性问题。
@ pinouchon的回答是正确的，如何删除箭头。 如果您对部件的默认样式没有问题，那么您可以节省大量的工作（键盘使用，可访问性问题，跨平台行为，mousedown-vs.-click-vs.click并保持，…）。
但是，虽然您可以使用-webkit-appearance / -moz-appearance来覆盖最初显示的部件的样式，但似乎没有任何方法可以重新设置掉落的部件。 在这种情况下，您需要使用JavaScript和插入HTML元素创建假选择菜单的路线，并希望您涵盖所有上述用例。
我们团队开始使用的后一种方法的一个例子是Felix Nagel的selectmenu jQuery UI插件 。
这里有点小提示你怎么做。 想法是隐藏与owerflow的arroes：隐藏; DIV。