Html 选择框箭头样式

Select box arrow style

提问by hungneox

I want to make the second select box arrow become the same with the first one. But I have no idea why they are different, because I didn't style the arrow.

我想让第二个选择框箭头与第一个相同。但我不知道为什么它们不同，因为我没有设计箭头。

回答by will

Browsers and OS's determine the style of the select boxes in most cases, and it's next to impossible to alter them with CSS alone. You'll have to look into replacement methods. The main trick is to apply appearance: nonewhich lets you override some of the styling.

在大多数情况下，浏览器和操作系统决定了选择框的样式，单靠 CSS 几乎不可能改变它们。您将不得不研究替换方法。主要技巧是应用appearance: none它让你覆盖一些样式。

My favourite method is this one:

我最喜欢的方法是这个：

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

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

It doesn't replace the OS select menu UI element so all the problems related to doing that are non-existant (not being able to break out of the browser window with a long list being the main one).

它不会替换 OS 选择菜单 UI 元素，因此与此相关的所有问题都不存在（无法以长列表为主要列表而跳出浏览器窗口）。

Good luck :)

祝你好运 ：）

回答by Rohit Azad

you can use jQuery selectbox replacement. It's a jQuery plugin.

您可以使用jQuery 选择框替换。这是一个jQuery插件。

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

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

ThePure-csshttp://bavotasan.com/2011/style-select-box-using-only-css/

在纯CSS http://bavotasan.com/2011/style-select-box-using-only-css/

回答by bresleveloper

for any1 using ie8 and dont want to use a plugin i've made something inspired by Rohit Azad and Bacotasan's blog, i just added a span using JS to show the selected value.

对于使用 ie8 并且不想使用插件的 any1，我制作了一些受 Rohit Azad 和 Bacotasan 博客启发的插件，我只是使用 JS 添加了一个跨度来显示所选值。

the html:

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>

the css (i used only an arrow for BG but you could put a full image and drop the positioning):

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:

js：

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

回答by GoTo

in Firefox 39 I've found that setting a border to the select element will render the arrow as (2). No border set, will render the arrow as (1). I think it's a bug.

在 Firefox 39 中，我发现为 select 元素设置边框会将箭头呈现为 (2)。未设置边框，会将箭头呈现为 (1)。我认为这是一个错误。

回答by Diego

http://jsfiddle.net/u3cybk2q/2/check on windows, iOS and Android (iexplorer patch)

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>

回答by viclim

The select box arrow is a native ui element, it depends on the desktop theme or the web browser. Use a jQuery plugin (e.g. Select2, Chosen) or CSS.

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