关于html：如何使用CSS设置 dropdown with only CSS?

是否有一种仅限CSS的方式来设置形式。 我可以在CSS中使用哪些属性？

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

  • Internet Explorer 6,7和8
  • 火狐
  • 苹果浏览器

我知道我可以使用JavaScript：示例。

我不是在谈论简单的造型。 我想知道，只有CSS才能做到最好。

我在StackOverflow上发现了类似的问题。

这个在Doctype.com上。

相关讨论

这里有3个解决方案：

解决方案＃1 - 外观：无 - 使用ie10-11解决方法(演示)

要隐藏select元素上的默认箭头集appearance: none，请使用background-image添加自己的自定义箭头

1
2
3
4
5
6
select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   background-image: url(...);   /* add custom arrow */
}

浏览器支持：

appearance: none有非常好的浏览器支持(caniuse) - 除了ie11-和firefox 34-

我们可以通过添加来改进这种技术并添加对ie10和ie11的支持

1
2
3
select::-ms-expand {
    display: none; /* hide the default arrow in ie10 and ie11 */
}

如果ie9是一个问题 - 我们无法删除默认箭头(这意味着我们现在将有两个箭头)，但是，我们可以使用一个时髦的ie9选择器
至少撤消我们的自定义箭头 - 保持默认选择箭头不变。

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

全部一起：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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: IE hackery ahead */


select::-ms-expand {
    display: none; /* remove default arrow in IE 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;
    }
}
1
2
3
4
5
6
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

这个解决方案很简单，并且具有良好的浏览器支持 - 通常应该足够了。

如果需要浏览器支持ie9-和firefox 34-那么请继续阅读......

解决方案＃2截断select元素以隐藏默认箭头(Demo)

(在这里阅读更多)

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

然后给select元素一个比div大约20个像素的宽度。

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

这种方法的优点是它是跨浏览器(InternetExplorer8及更高版本，WebKit和Gecko)。然而，这种方法的缺点是选项下拉突出在右侧(由我们隐藏的20个像素...因为选项元素占用了选择元素的宽度)。

enter image description here

[但是，应该注意的是，如果仅对MOBILE设备需要自定义选择元素 - 则上述问题不适用 - 因为每个电话本身打开select元素的方式。所以对于移动设备，这可能是最好的解决方案。]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
}
1
2
3
4
5
6
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>

如果在Firefox上需要自定义箭头 - 在版本35之前 - 但您不需要支持旧版本的IE - 那么继续阅读......

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

(在这里阅读更多)

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

优点：在WebKit和Gecko中运行良好。它看起来也不错(没有突出option元素)

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

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

注意：因为InternetExplorer 10不再支持conditional comments：如果你想使用这种方法，你应该使用Modernizr。但是，仍然可以使用此处描述的CSS hack从InternetExplorer 10中排除指针事件CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--[if !IE]> -->

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

<!-- <![endif]-->

相关讨论