默认下拉框select美化
程序员文章站
2022-03-09 10:05:06
...
默认的select下拉框，样子丑，并且在各个浏览器的样子还不一样。所以需要美化。当然，要完全兼容的话，改起来会很费事，这时就建议你自己模拟了，或找相关插件。比如jquery插件啊，js插件等等. 这里主要介绍默认下拉框美化方法。
思路：
重置select 默认下拉框样式，用自定义的图片覆盖默认下拉三角按钮。如果低版本ie9以下的话，建议套个外层div（overflow-x: hiddden），让select超出外层宽度隐藏。
关键代码：
dom结构：
<div class="button custom-select">
<select>
<option value="选择1" selected="selected">Connecticut</option>
<option value="选择2">New York</option>
<option value="选择3">Maryland</option>
<option value="选择4">Virginia</option>
</select>
</div>
css：
select{
border: solid 1px #ccc;
appearance: none;/*清除select下拉框默认样式*/
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 14px;/*为下拉小箭头留出一点位置，避免被文字覆盖*/
background: url("img/arrow.png") no-repeat scroll right center transparent;/*自定义图片覆盖原有的下三角符号*/
}
select::-ms-expand {
display: none;/*清除IE默认下拉按钮，但是测试发现IE10以上有效，IE8，9默认下拉按钮仍旧存在*/
}