css实现自定义选择框的方法

本篇文章主要探讨css实现自定义选择框的方法。有一定的参考价值，有需要的朋友可以参考一下，跟随小编一起来看解决方法吧。

代码如下：

HTML：

      合肥    南京    芜湖    杭州  

CSS：

.select-style {    border: 1px solid #ccc;    width: 120px;    border-radius: 3px;    overflow: hidden;    background: #fafafa url("image/greatwall.jpg") no-repeat 90% 50%;    }    .select-style select {    padding: 5px 8px;    width: 130%;    border: none;    box-shadow: none;    background: transparent;    background-image: none;    -webkit-appearance: none;    color: lightblue;    }    .select-style select:focus {    outline: none;    }

效果如下：

以上就是css实现自定义选择框的详细内容，代码示例简单明了，如果在日常工作遇到此问题。通过这篇文章，希望你能有所收获，更多详情敬请关注行业资讯频道！