大多数人都会觉得选择框的样式弄起来有点麻烦，但是本篇文章将会对你有点帮助，你基本上可以尽可能地删除原始选择，然后使用div包装进行样式设置（适用于ie8 +），话不多说，我们来直接进入正文。
这个方法看起来很简单，你可以根据自已的需求去设置样式（推荐课程：css视频教程）
代码如下：
HTML：
<div class="select-style">
<select>
<option value="city1">合肥</option>
<option value="city2">南京</option>
<option value="city3">芜湖</option>
<option value="city4">杭州</option>
</select></div>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实现自定义选择框的技巧方法（代码示例）的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
305
收藏
