今天小编跟大家讲解下有关只用CSS美化选择框的实现代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关只用CSS美化选择框的实现代码 的相关资料，希望小伙伴们看了有所帮助。
下面是一个默认样式的下拉框的长相： Here is the first option The second option HTML code： 复制代码代码如下: <select> <option>Here is the first option</option> <option>The second option</option> </select> 一个选择框的某些部分我们是可以美化的 比如字体、边框、颜色、内边距和背景颜色： Here is the first option The second option 但是烦人的下拉箭头还是保持不变。没有直接美化它的方式 但解决方案还是非常简单的 首先我们需要用一个div容器包裹在select元素外围： 复制代码代码如下: <div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select> </div> 下一步我们需要加入一些css 以确保选择框元素被以某种方式美化： 复制代码代码如下: .styled-select select { background: transparent; width: 268px; padding: 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; } 我们需要确保选择框的跨度比外围的div容器更宽 这样默认的下拉箭头就会消失（译者注：选择框比外面的div宽大 默认的下拉箭头就会被隐藏） 下面是我们要用的新下拉箭头： 我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置： 复制代码代码如下: .styled-select { width: 240px; height: 34px; overflow: hidden; background: url(new_arrow.png) no-repeat right #ddd; } 知道这点解决办法将使你非常容易的 不用别的只使用css就能美化您的选择框。 译者注：在线调式地址http://jsfiddle.net/shishaomeng/KGrYB/ 各位看官可自行进入调试来源：爱蒂网
