CSS - 选择元素 - BORDER-RADIUS - Opera显示选择输入框后面的边框？就是没有圆角边框？

Question

我试图在Opera中为select元素添加样式，但遇到了困难。

问题在于，在CSS中应用的大多数样式会显示在Opera（11.60）中，但由于某些原因，有些样式被留下了，例如框阴影效果和边框半径。

在我看来，Opera将选择的元素显示在这些样式之上，因为在过渡中我注意到曲线边框确实存在，只是在选择的元素后面。也就是说，未聚焦的选择元素似乎没有边框半径效果，但是当对元素应用焦点时，您会看到边框在过渡中然后再次消失在元素后面。

在IE 9、Firefox 9和最新版本的Chrome中，所涉及的选择元素几乎是一致的。而且在所有浏览器中，包括Opera在内，应用相同元素样式的输入元素完美地输出。

以下为HTML代码：

<div class="searchBox">
<form method="post" action="'.$_SERVER['PHP_SELF'].'" name="search">
<label for="bizName">Biz Name:</label>
<input name="bizName" class="bizName" type="search" placeholder="Search..." />
<label for="bizCategory">Biz Category:</label>
<select name="bizCategory" class="bizCategory" onchange="this.form.submit()">
    <option>Choose</option>
</select>
<button type="submit" name="searching" class="search" value="Search">Search</button>
</form>
<!-- end .searchBox --></div>

以下是页面的CSS：

input, select {
    background: #fcfcfc;
    border: 0px none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6a6f75;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-background-clip: padding-box;
    -webkit-transition: all 0.7s ease-out 0s;  /* Saf3.2+, Chrome */
    -moz-transition: all 0.7s ease-out 0s;  /* FF4+ */
    -ms-transition: all 0.7s ease-out 0s;  /* IE10? */
    -o-transition: all 0.7s ease-out 0s;  /* Opera 10.5+ */
    transition: all 0.7s ease-out 0s;
}

input {
    padding: 7px 25px;
    width: 135px;
}

select {
    padding: 7px 10px;
    width: 185px;
}

input:focus, select:focus
{
    background: #6699cc;
    color: #e7f3ff;
    text-shadow:
        -1px -1px 0 #666,
        1px -1px 0 #666,
        -1px 1px 0 #666,
        1px 1px 0 #666;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}

.bizCategory {
    margin-right: 15px;
}

我不明白为什么Opera要这样反应，因为我认为它在某种程度上支持W3C规范？

无论如何，我的假设是Opera正在对此select标记应用某种默认样式。但这只是一个假设。

有没有其他人能够提供相关的信息？或者有没有经历过这个问题的人能够解释一下这里到底发生了什么？

非常感谢您花时间阅读！

- Craig van Tonder

---

在Opera中，选择框可以使用border-radius样式，但选项不行... 可能的解决方法：http://my.opera.com/community/forums/topic.dml?id=1096602 - anderssonola

@soderslatt 你好，感谢你的建议。我在寻找解决问题的过程中已经查看了这个线程，但是这种解决方法似乎在11.60版本中不起作用，即使以前有用过。我尝试使用帖子中建议的样式进行重新设计，但所有这些只会让角落的曲线突出，但并不完全。增加填充会增加选项内部的填充...这真的很令人沮丧。 - Craig van Tonder

请记住，在大多数当前的Mac OS X浏览器中，这些内容看起来并不太好。您可能需要重新考虑一下这种方法。怎么样将select标签包装在div中，并对div进行样式设置呢？ - webinista

Answer 1

2015年改进的答案：

我发现在当前时代，使用样式化的下拉列表非常必要-所以这是我迄今为止最好的经验。实际上没有任何无JavaScript解决方案来解决这个问题。虽然您可以使用无序列表和列表元素进行样式设置，并使用一些JavaScript从所选li中获取信息并通过ajax post方法发布。IE8+的解决方案如下，不需要任何框架：

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

如果你正在使用框架，请查看下面的angular和bootstrap内置选择器。

Angular Angular选择器来自于angular material，您可以在其上添加任何想要的样式或者自己定义样式，我用了框架的JavaScript做了同样的事情。

还有一个Bootstrap UI，它是一个用于各种表单字段的angular框架。

Bootstrap 如果你的项目中没有使用angular，我认为bootstrap解决这个问题的方式是我迄今使用过的最好的方式。Bootstrap select 旧答案

通常我会说永远不要重新设计一个选择按钮，但无论如何，您可以查看它的方法https://gist.github.com/itsadok/1139558 如果只需要支持新版本的浏览器，您可以使用它，并像其他对象一样进行样式设置。

   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;

关于此事，请参见此处

或者我可以选择使用JavaScript解决方案，已经有很多人分享了这样的解决方案，比如：adam.co/lab/jquery/customselect 或者 bulgaria-web-developers.com/projects/javascript/selectbox 或者像使用基于

和
• 的jQuery插件一样自己构建它。

  在您的问题中，您甚至可以选择像“

  &
  • ”这样的菜单结构，并在单击时调用jQuery，例如：此FIDDLE

    只需从“.yourtextholder”中获取文本并将其发送到URL即可。

- Simon Dragsbæk

---

我将此标记为答案，因为这基本上是我所看到的与该主题相关的最具决定性的信息。谢谢Simon :) - Craig van Tonder

Answer 2

问题出在 select 元素的背景上，导致圆角无法生效。（类似于 IE8 中的 ActiveX 过滤器）

如果你不需要特定的背景颜色，可以使用完全透明的背景：

select {
  background-color: rgba(255, 255, 255, 0.0)
}

下拉按钮仍然会在右侧重叠，但至少在左侧你可以消除那些“狗耳朵”。

- Daniel Rikowski