如何为< select>设置样式仅CSS的下拉菜单? [英] How do I style a <select> dropdown with only CSS?

查看：90 发布时间：2020/7/18 23:29:15 html css combobox cross-browser skinning

本文介绍了如何为< select>设置样式仅CSS的下拉菜单?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否存在仅CSS样式设置<select>下拉菜单的方式?

我需要在不使用任何JavaScript的情况下，尽可能地设置<select>表单的样式.我可以在CSS中使用哪些属性?

此代码必须与所有主要浏览器兼容:

Internet Explorer 6、7和8
Firefox
Safari

我知道我可以使用JavaScript做到:类似的问题.

在Doctype.com上此.

解决方案

以下是三种解决方案:

解决方案#1-外观:无-使用Internet Explorer 10-11解决方法(演示)

要隐藏选择元素上默认的箭头集appearance: none，然后使用background-image

添加您自己的自定义箭头

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

浏览器支持:

appearance: none具有非常好的浏览器支持( caniuse )-Internet Explorer 除外; 11(及更高版本)和Firefox 34(及更高版本).

我们可以改进此技术，并通过添加

来添加对Internet Explorer 10和Internet Explorer 11的支持.

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

如果担心Internet Explorer 9，我们无法删除默认箭头(这意味着我们现在将有两个箭头)，但是我们可以使用时髦的Internet Explorer 9选择器./p>

至少撤消我们的自定义箭头-保留默认的选择箭头.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

在一起:

 select {
  margin: 50px;
  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;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

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

此解决方案简单易行，并具有良好的浏览器支持-通常就足够了.

如果需要Internet Explorer 9(及更高版本)和Firefox 34(及更高版本)的浏览器支持，请继续阅读...

解决方案#2截断选择元素以隐藏默认箭头(演示)

(在此处了解更多)

将select元素包装在具有固定宽度和overflow:hidden的div中.

然后为select元素提供一个比div大20像素的宽度.

结果是select元素的默认下拉箭头将被隐藏(由于容器上的overflow:hidden)，并且您可以将所需的任何背景图像放在右侧

此方法的优势是跨浏览器(Internet Explorer 8和更高版本， WebKit 和 Gecko ).但是，这种方法的缺点是选项下拉菜单在右侧突出(根据我们隐藏的20个像素...，因为选项元素采用了选择元素).

[但是应该注意，如果自定义选择元素仅对于移动设备是必需的-则上述问题就不适用-因为每部电话都以本机打开选择的方式元素.因此对于移动设备，这可能是最好的解决方案.]

 .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>

如果在Firefox上需要自定义箭头-在版本35 -但是您不需要支持Internet Explorer的旧版本-然后继续阅读...

解决方案3-使用pointer-events属性(演示)

(在此处了解更多)

这里的想法是在本地下拉箭头上覆盖一个元素(以创建我们的自定义箭头)，然后在其上禁止指针事件.

优点:在WebKit和Gecko中效果很好.看起来也不错(不突出option元素).

缺点:Internet Explorer(Internet Explorer 10及更低版本)不支持pointer-events，这意味着您无法单击自定义箭头.另外，此方法的另一个(明显)缺点是您不能用悬停效果或手形光标作为新箭头图像的目标，因为我们刚刚禁用了它们的指针事件！

但是，通过这种方法，您可以使用Modernizer或条件注释使Internet Explorer还原为内置的箭头标准.

注意::Internet Explorer 10不再支持conditional comments:如果要使用此方法，则可能应该使用 Modernizr .但是，仍然可以通过此处所述的CSS hack从Internet Explorer 10中排除指针事件CSS./p>

 .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]-->

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.

解决方案

Here are three solutions:

Solution #1 - appearance: none - with Internet Explorer 10 - 11 workaround (Demo)

To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

Browser Support:

appearance: none has very good browser support (caniuse) - except for Internet Explorer 11 (and later) and Firefox 34 (and later).

We can improve this technique and add support for Internet Explorer 10 and Internet Explorer 11 by adding

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

If Internet Explorer 9 is a concern, we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky Internet Explorer 9 selector.

To at least undo our custom arrow - leaving the default select arrow intact.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

All together:

select {
  margin: 50px;
  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;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

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

This solution is easy and has good browser support - it should generally suffice.

If browser support for Internet Explorer 9 (and later) and Firefox 34 (and later) is necessary then keep reading...

Solution #2 Truncate the select element to hide the default arrow (demo)

(Read more here)

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 only for mobile devices - then the above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this may be 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>

If the custom arrow is necessary on Firefox - prior to Version 35 - but you don't need to support old versions of Internet Explorer - then keep reading...

Solution #3 - Use the pointer-events property (demo)

(Read more here)

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: It works well in WebKit and Gecko. It looks good too (no jutting out option elements).

Disadvantage: Internet Explorer (Internet Explorer 10 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 this approach, 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的下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何为< select>设置样式仅CSS的下拉菜单? [英] How do I style a <select> dropdown with only CSS?

问题描述

在一起:

All together:

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何为&lt; select&gt;设置样式仅CSS的下拉菜单? [英] How do I style a &lt;select&gt; dropdown with only CSS?

问题描述

在一起:

All together:

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

如何为< select>设置样式仅CSS的下拉菜单? [英] How do I style a <select> dropdown with only CSS?

登录关闭