怎么用css实现自定义选择框

这篇文章主要为大家展示了“怎么用css实现自定义选择框”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么用css实现自定义选择框”这篇文章吧。

　　代码如下：

　　HTML：

　　<divclass="select-style">

　　<select>

　　<optionvalue="city1">合肥</option>

　　<optionvalue="city2">南京</option>

　　<optionvalue="city3">芜湖</option>

　　<optionvalue="city4">杭州</option>

　　</select></div>

　　CSS：

　　.select-style{

　　border:1pxsolid#ccc;

　　width:120px;

　　border-radius:3px;

　　overflow:hidden;

　　background:#fafafaurl("image/greatwall.jpg")no-repeat90%50%;

　　}

　　.select-styleselect{

　　padding:5px8px;

　　width:130%;

　　border:none;

　　box-shadow:none;

　　background:transparent;

　　background-image:none;

　　-webkit-appearance:none;

　　color:lightblue;

　　}

　　.select-styleselect:focus{

　　outline:none;

　　}

以上是“怎么用css实现自定义选择框”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！