怎样用 CSS + JS 美化网页中的 select 下拉框

这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：

<!-- html 布局 -->
<div id="selectStyle">
 <select id="select">
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
  <option>option 5</option>
 </select>
</div>

首先要去掉 #select 的默认样式：

/ 去掉默认样式，设置新的样式 /
#select{
display:block;
width:100%;
height:100%;
box-sizing:border-box;
background:none;
border:1px solid #222;
outline:none;
-webkit-appearance:none;
padding:0 5px;
line-height:inherit;
color:inherit;
cursor:default;
font-size:14px;
position:relative;
z-index:3;
}
#select option{
color:#222;
}
#select option:hover{
color:#fff;
}
#select option:checked{
background:#535353;
color:#fff; 
}

然后在外层div#selectStyle设置自定义样式

#selectStyle{
display:block;
margin:0 auto;
overflow:hidden;
height:30px;
width:240px;
border-radius:0;
background:#535353 url("箭头地址") right center no-repeat;
background-size:auto 80%;
color:#fff;
line-height:2;
/ 如果不想加，
   则可以设置一个自己的三角形样式，
   如下的自定义方式，
   见代码1 /
position:relative;
z-index:1;
}
/ 代码1 /
#selectStyle:before{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-25px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#fff transparent transparent transparent;
content:"";
}
/ 代码1 /
#selectStyle:after{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-35px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#535353 transparent transparent transparent;
content:"";
}

以上就是自定义select样式的方法；

同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框（需要Javascript辅助）。

以上就是关于怎样用 CSS + JS 美化网页中的 select 下拉框全部的内容，包括:怎样用 CSS + JS 美化网页中的 select 下拉框、、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！