[分享]css下拉选修改三角形

在进行网页设计时，下拉选框是一个经常使用的元素。默认的下拉选框三角形样式可能会让网页效果失色，需要进行修改，下面介绍几种方法。.select{ appearance:none; webkitappea...

在进行网页设计时，下拉选框是一个经常使用的元素。默认的下拉选框三角形样式可能会让网页效果失色，需要进行修改，下面介绍几种方法。

.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字符作为三角形样式。需要注意的是，此方法存在跨浏览器兼容性问题，需要根据具体情况选择使用。