css修改html select下拉框样式(含右边箭头)-三体教程
文章目录

css修改html select下拉框样式(含右边箭头)

我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的。

如果不使用插件,靠纯css能不能做出漂亮美观的select来呢?

答案是:可以。

其实select标签,不仅可以修改边框样式、颜色,还可以修改右边的下拉箭头。

修改边框样式,直接使用border:1px blue dashed就可以,当然相关参数自己修改。

然而要修改下接箭头,代码就稍微要复杂些,需要将select选择框的样式清除掉,然后再依靠background来添加箭头。

下面是详细代码:

html代码<style>
select{
  /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
  border:1px #ff0000 dashed;
  /*很关键:将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  /*在选择框的最右侧中间显示小箭头图片*/
  background:url("http://www.santii.com/source/1507797721809079.gif") no-repeat scroll right center transparent;
  /*为下拉小箭头留出一点位置,避免被文字覆盖*/
  padding-right:14px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand{display: none;}
</style>
<select name="dateY" id="dateY">
    <option value="2015">2015年</option>	
    <option value="2016">2016年</option>	
    <option value="2017" selected="selected">2017年</option>	
    <option value="2018">2018年</option>
</select>
亲自测试一下

需要注意的是,旧版ie对其兼容性不好。

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


数据更新时间:2018-05-21