?? css修改selec下拉菜单样式|三体新亚博app官网 新亚博app官网,亚博88娱乐场,yabo平台的网站
文章目录

css修改selec下拉菜单样式

修改select下拉菜单样式其实可以使用javascript来操作,这样更方便。

但有些人并不喜欢,想用单纯的css来控制。

以下有三种解决方案,看看哪一个合适。

解决方案1 外观:无 - 与ie10-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有非常好的浏览器支持ie11和firefox34除外

我们可以通过增加这个技术来增加对ie10和ie11的支持

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

如果是ie9,那又是一个问题,我们没有办法去除默认箭头(这意味着我们现在有两个箭头)。

但是,我们可以使用时髦的ie9选择器来至少撤销我们的自定义箭头——保留默认选择箭头。

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

完整代码如下:

html代码
  

亲自测试一下

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

如果浏览器支持IE9和Firefox 34是必要的,那么继续往下看。

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

将select用一个div元素包裹起来,给一个固定的宽度和高度,并使用overflow:hidden

然后将select元素的宽度设为比div大20个像素。

结果是select元素的默认下拉箭头将被隐藏(归因于overflow:hidden容器上),并且可以在div的右侧放置任何想要的背景图像。

这种方法的优点是它是跨浏览器(Internet Explorer 8及更高版本,WebKit和Gecko)。

然而,这种方法的缺点是选项下拉列表在右侧(通过我们隐藏的20个像素...因为选项元素占据了选择元素的宽度)。

但是,应该注意的是,如果自定义选择元素仅用于移动设备,则上述问题不适用 。

完整代码如下:

html代码
  
?

亲自测试一下

如果自定义箭头一定要用在firefox上面,并且在在35版本之前,但是您又不需要支持IE的旧版本,那么请继续往下看。

解决方案3 使用pointer-events属性

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

优点:适用于WebKit和Gecko。它看起来也不错(没有突出的option元素)

缺点:?Internet Explorer(IE10和以下)不支持pointer-events,这意味着你不能点击自定义箭头。

此外,这种方法的另一个(显而易见的)缺点是,您不能使用悬停效果或手形光标来定位您的新箭头图像,因为我们刚刚禁用了指针事件!

完整代码如下:

html代码
  
  
? ? ? ?

亲自测试一下

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

注意:因为Internet Explorer 10不再支持conditional comments:如果你想使用这种方法,你应该使用Modernizr。

但是,仍然可以使用这里描述的CSS hack从Internet Explorer 10中排除指针事件CSS?。

本文网址:http://www.santii.com/article/186.html

?
数据更新时间:2019-08-11