选择框箭头样式

Question

我想让第二个下拉框的箭头与第一个相同。但我不知道为什么它们不同，因为我没有设置箭头风格。

- hungneox

Answer 1

大多数情况下，浏览器和操作系统会确定选择框的样式，仅通过CSS很难更改它们。您需要寻找替代方法。主要的技巧是应用 appearance: none ，这可以让您覆盖一些样式。

我最喜欢的方法是这个：

http://cssdeck.com/item/265/styling-select-box-with-css3

它不会替换操作系统的选择菜单 UI 元素，因此与此相关的所有问题都不存在（无法使用长列表打破浏览器窗口是主要问题）。

祝你好运 :)

- will

---

很棒的技巧，可惜“pointer-event”在IE上仍然有很长的路要走，甚至无法通过polyfill实现。 - Mihai Stancu

那个链接已经失效了 :( - Jonathan Tuzman

Answer 2

你可以使用jQuery selectbox replacement。这是一个jQuery插件。

http://cssglobe.com/post/8802/custom-styling-of-the-select-elements

纯CSS http://bavotasan.com/2011/style-select-box-using-only-css/样式选择框

- Rohit Azad Malik

---

1和2都是纯HTML和CSS :( - hungneox

嘿 @eureka，如果你想要纯CSS，那就去http://bavotasan.com/2011/style-select-box-using-only-css/。 - Rohit Azad Malik

我发现第一个没有背景属性，不管怎样谢谢你 :D - hungneox

@RohitAzadMalik - 这也需要HTML，而不仅仅是CSS。每个选择器都需要被包裹起来才能使他的CSS起作用。 - undefined

Answer 3

对于使用IE8并且不想使用插件的任何人，我做了一些灵感来自Rohit Azad和Bacotasan的博客，我只是添加了一个使用JS显示所选值的span。

HTML代码：

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
   <span>Here is the first option</span>
</div>

这是与编程有关的内容，CSS代码如下（我只用了一个箭头作为BG，但您也可以使用完整的图片并调整其位置）：

.styled-select div
{
    display:inline-block;
    border: 1px solid darkgray;
    width:100px;
    background:url("/Style Library/Nifgashim/Images/drop_arrrow.png") no-repeat 10px 10px;
    position:relative;
}

.styled-select div select
{
    height: 30px;
    width: 100px;
    font-size:14px;
    font-family:ariel;

    -moz-opacity: 0.00;
    opacity: .00;
    filter: alpha(opacity=00);
}

.styled-select div span
{
    position: absolute;
    right: 10px;
    top: 6px;
    z-index: -5;
}

the js:

$(".styled-select select").change(function(e){
     $(".styled-select span").html($(".styled-select select").val());
});

- bresleveloper

Answer 4

http://jsfiddle.net/u3cybk2q/2/ 检查在Windows、iOS和Android上的表现（iexplorer补丁）

.styled-select select {
   background: transparent;
   width: 240px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}
.styled-select {
   width: 240px;
   height: 34px;
   overflow: visible;
   background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
   border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
    display: none;
}

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

- Diego

Answer 5

在Firefox 39中，我发现为选择元素设置边框将会呈现箭头如图(2)。没有设置边框，则会呈现箭头如图(1)。我认为这是一个bug。

- GoTo

Answer 6

选择框箭头是本地UI元素，它取决于桌面主题或Web浏览器。使用jQuery插件（例如Select2，Chosen）或CSS。

- viclim