设置或替换标准选择元素 [英] Styling or Replacing the Standard Select Element

问题描述

我已经进行了很多搜索，但似乎找不到我认为可能是非常简单的问题的答案.

I've done a lot of searching and can't seem to find the answer to what I thought might be a fairly straight forward question.

我想在页面上设置一个选择的样式，以便它基本上是一个绿色的正方形，所选的数字(1-20)中间用白色显示.

I want to style a select on my page so that it is basically a green square with the selected number (1 - 20) shown in white in the middle.

这是我到目前为止所拥有的:

Here is what I have so far:

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

到目前为止看起来还不错，但是我无法找到如何删除箭头的任何方法，以使其看起来像是带有数字的普通框.

It looks fine so far but I cannot find anything on how to remove the arrow in order to make this look like a plain box with the number in.

(在我得到我为什么不应该这么做的一千封信之前……我知道.我之前都读过它们！！不问您是否告诉我 应该 ，而是问我如何 做 ！应用程序，通过点击绿色框，然后从结果列表中选择一个数字，可以选择一个数字.很明显，该框的作用是，因此无需在此处进行无障碍访问.

(And before I get a thousand replies on why I shouldn't do this... I know. I have read them all before!! I'm not asking you to tell me if I should I'm asking how I do! It is for a mobile app where a number will be selected by tapping the green box and then choosing the number from the resulting list. It will be obvious what the box does so there is no need to get into an accessibility conversation here please).

我已经读了很多关于不能很容易地设置选择样式和其他表单元素样式的知识，并且还阅读了很多类似以下内容的答案:

I have read a lot about not being able to style selects and other form elements very easily and I have also read a lot of answers that go something like:

您无法设置控件本身的样式，但是使用JavaScript可以 隐藏它并创建一个JavaScript功能控件，使其像拖放一样 下列表.选择一个项目后，它会在下拉菜单中选择该项目 列表中."

"You can't style the control it's self, but using JavaScript you can hide it and create a JavaScript functional control to act like a drop down list. When an item is selected it selects the item in the drop down list."

但是令人惊讶的是很少的例子.

but then surprisingly few examples.

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

So does anyone have a way pf styling the arrow so that it 'disappears' or if it is not possible to use simply CSS to remove the arrow then does any one have any good examples of how to replicate this effect with Javascript?

谢谢

推荐答案

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

In wekbit browsers, you can use:

select {
  -webkit-appearance: none;
}

即使在-moz-appearance: none;或appearance: none;

jsFiddle

但是恕我直言，最好采用这种方式:设置自定义元素的样式并使用jQuery对其进行动画处理.然后添加一个包含上述元素的jQuery填充的隐藏选择.它更长一些，但是这样您就不会有太多的浏览器兼容性问题.

But IMHO, it is better to do this way: style customized elements and animate them with jQuery. Then add a hidden select that is filled with jQuery with the elements above. It is a bit longer, but this way you won't have so much browsers compatibility problems.

这篇关于设置或替换标准选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！