在进行网页设计时,下拉选框是一个经常使用的元素。默认的下拉选框三角形样式可能会让网页效果失色,需要进行修改,下面介绍几种方法。.select{ appearance:none; -webkit-app
在进行网页设计时,下拉选框是一个经常使用的元素。默认的下拉选框三角形样式可能会让网页效果失色,需要进行修改,下面介绍几种方法。
.select{
appearance:none;
-webkit-appearance:none;
background:url(arrow.png) no-repeat right center;
border-radius:5px;
padding-right:20px;
}
在CSS3中可以使用appearance属性来去除默认的下拉选框样式,最后使用背景图来实现三角形效果。需要注意的是,部分浏览器需要加上-webkit前缀。
.select{
position:relative;
display:inline-block;
}
.select:after{
content:"";
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #000;
position:absolute;
right:5px;
top:50%;
transform:translateY(-50%);
}
在这个方法中,我们使用伪元素:after来创建一个块级元素,再使用边框来构造三角形形状。需要注意的是,使用绝对定位和transform属性来使三角形实现水平居中和垂直居中。
.select{
-moz-appearance:none;
-webkit-appearance:none;
appearance:none;
}
.select:after{
content:"▼";
font-size:12px;
color:#000;
position:absolute;
right:5px;
top:50%;
transform:translateY(-50%);
}
在这个方法中,我们依然使用appearance属性去除默认样式,在伪元素:after中插入unicode字符作为三角形样式。需要注意的是,此方法存在跨浏览器兼容性问题,需要根据具体情况选择使用。
粉丝
0
关注
0
收藏
0