如何设定样式< select>下拉CSS，没有JavaScript？ [英] How to style a <select> dropdown with CSS only without JavaScript?

问题描述

是否有一种仅限CSS的方式来设置< select> 下拉菜单的样式？

风格a < select> 形式尽可能多的人，没有任何JavaScript。

此代码需要与所有主流浏览器兼容：

• Internet&Explorer 6,7和8


• Firefox


• Safari

我知道我可以使用JavaScript：

FIDDLE

这里的想法是在原生下拉箭头创建我们自定义的一个），然后禁止其上的指针事件。

优势：在WebKit和Gecko中工作良好。它看起来不错（选项元素）

缺点： Explorer（IE10及以下版本）不支持 pointer-events ，这意味着您无法单击自定义箭头。此外，此方法的另一个（显而易见的）缺点是，您不能使用悬停效果或手形光标定位您的新箭头图像，因为我们刚刚禁用了指针事件！

但是，使用此方法，您可以使用Modernizer或条件注释，使Internet Explorer恢复为标准内置箭头。

注意： / strong>由于Internet Explorer 10不再支持条件注释：如果要使用方法＃2，则应该使用 Modernizr 。但是，仍然可以使用CSS hack从Internet Explorer 10中排除指针事件CSS，此处。 / p>

  .notIE {position：relative; display：inline-block;} select {display：inline-block; height：30px; width：150px; outline：none;颜色：＃74646e; border：1px solid＃C8BFC4; border-radius：4px; box-shadow：inset 1px 1px 2px＃ddd8dc; background：#fff;} / *选择箭头样式* /。notIE .fancyArrow {width：23px; height：28px; position：absolute; display：inline-block; top：1px; right：3px; background：url（http://www.stackoverflow.com/favicon.ico）right / 90％no-repeat #fff; pointer-events：none;} / *目标Internet Explorer 9和Internet Explorer 10：* / @ media screen和（min-width：0 \0）{.notIE .fancyArrow {display：none; }}  

 < !- [if！IE] > - >< div class =notIE> <！ - <！[endif]  - > < span class =fancyArrow>< / span> < select> < option>苹果< / option> < option selected> Pineapples< / option> < option> Chocklate< / option> < option> Pancakes< / option> < / select> <！ -  [if！IE]> - >< / div>< ;!  - <！[endif]  - >  

Is there a CSS-only way to style a <select> dropdown?

I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?

This code needs to be compatible with all major browsers:

• Internet Explorer 6,7 and 8
• Firefox
• Safari

I know I can make it with JavaScript: Example.

And I'm not talking about simple styling. I want to know, what the best we can do with CSS only.

I found similar questions on Stack Overflow.

And this one on Doctype.com.

解决方案

Important Update!

In addition to webkit, as of Firefox V35 we'll be able to use the appearance property.

(From the above link:)

Using -moz-appearance with the none value on a combobox now remove the dropdown button

So now in order to hide the default styling - it's as easy as adding the following rules on our select element:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

For IE 11 support, you can use ::-ms-expand.

select::-ms-expand { /* for IE 11 */
    display: none;
}

Step #1 - FIDDLE

Next, to add our own custom arrow we just add a background image.

Step #2 - FIDDLE

The problem now is that no version of IE currently supports the appearance property.

So we have to remove the background image on IE...

Step #3 (FINAL) - FIDDLE

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  select {
    background: none;
    padding: 5px;
  }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

---

If the custom arrow is necessary on IE or on Firefox - prior to V35 - then keep reading...

Here are two additional solutions to achieve a custom arrow on a select element:

#1 - Hide the default arrow - (Source)

FIDDLE

Wrap the select element in a div with a fixed width and overflow:hidden.

Then give the select element a width of about 20 pixels greater than the div.

The result is that the default drop-down arrow of the select element will be hidden (due to the overflow:hidden on the container), and you can place any background image you want on the right-hand-side of the div.

The advantage of this approach is that it is cross-browser (Internet Explorer 8 and later, WebKit, and Gecko). However, the disadvantage of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid... because the option elements take the width of the select element).

[It should be noted, however, that if the custom select element is necessary for MOBILE this above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this is probably the best solution.]

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;
}

<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

#2 - Use the pointer-events property (Source)

FIDDLE

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: Works well in WebKit and Gecko. It looks good too (no jutting out option elements)

Disadvantage: Internet Explorer (IE10 and down) doesn't support pointer-events, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!

However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.

NB: Being that Internet Explorer 10 doesn't support conditional comments anymore: If you want to use approach #2, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described here.

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646e;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #ddd8dc;
  background: #fff;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

这篇关于如何设定样式< select>下拉CSS，没有JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！