Select下拉选择框的美化
程序员文章站
2022-07-07 18:15:09
...
Select下拉选择框的美化
1.1 CSS修改select下拉框的默认样式
1、原理
将浏览器默认的下拉框样式清除，然后自定义样式，再附一张小箭头图片或者使用三角的实体字符即可。
2、用法
select {
/*将默认的select选择框样式清除，IE8/9并不支持 appearance:none CSS属性*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {display: none;}
注意：上述方式不能兼容IE9及以下版本。
3、兼容低版本IE浏览器
为select添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见（overflow: hidden；），即可覆盖小箭头。
此方法的缺陷是并不能隐藏下拉框的显示，下拉选项的宽度会比他的父容器宽，看上去有点不协调。
4、实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {display:none;}
select#selectTravelCity{
width:185px;
padding:0.2em 0.4em;
cursor:pointer;
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border:1px solid #94c1e7;
/*将默认的select选择框样式清除*/
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
select#selectPointOfInterest{ width:185px; padding:0.2em 0.4em; border:1px solid #94c1e7; cursor:pointer; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
label#lblSelect{ position: relative; display: inline-block; }
label#lblSelect::after{ content:"\25bc"; position:absolute; top:0; right:0; bottom:0; width:20px; line-height:28px; text-align:center; background:#94c1e7; color:#2984ce; pointer-events:none; }
label.select-container{ width: 160px; overflow: hidden; }
</style>
</head>
<body>
<select id="selectTravelCity">
<option>去掉select原有样式</option>
<option>Washington DC</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
<option>Phoenix</option>
</select>
<br><br>
<label id="lblSelect">
<select id="selectPointOfInterest">
<option>定义新样式</option>
<option>food beverage</option>
<option>restaurant</option>
<option>shopping</option>
<option>taxi limo</option>
<option>theatre</option>
<option>museum</option>
<option>computers</option>
</select>
</label>
<br><br>
<label id="lblSelect" class="select-container">
<select id="selectPointOfInterest">
<option>定义新样式</option>
<option>food beverage</option>
<option>restaurant</option>
<option>shopping</option>
<option>taxi limo</option>
<option>theatre</option>
<option>museum</option>
<option>computers</option>
</select>
</label>
</body>
</html>
1.2利用js自定义select显示部分，覆盖select原有显示部分。
1、实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
.ui-select{ position: relative; height:28px; padding:0 30px; line-height:28px; color:#fff; background-color:#ECAFB4; }
.ui-select::after{ content:"\25bc"; position:absolute; top:0; right:0; bottom:0; width:20px; line-height:28px; text-align:center; background-color:#ECAFB4; color:#fff; pointer-events:none; }
select{ width:100%; height:28px; padding:0 23px; font-size: 16px; line-height:28px; opacity: 0; position: absolute; top:0; left:0; }
</style>
</head>
<body>
<div class="ui-select">
<span>使用现金券</span>
<select name="" id="">
<option value="10元现金券">10元现金券</option>
<option value="20元现金券">20元现金券</option>
<option value="30元现金券">30元现金券</option>
<option value="40元现金券">40元现金券</option>
</select>
</div>
<!--[if !IE]><!-->
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->
<script>
$(".ui-select select").change(function(){
$(this).prev("span").html($(this).find("option:selected").val());
})
</script>
</body>
</html>
1.3利用js完全自定义select下拉选择
1、实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
.show-part{ position: relative; height:28px; }
.show-part::after{ content:"\25bc"; position:absolute; top:0; right:0; bottom:0; width:30px; line-height:28px; text-align:center; pointer-events:none; }
.select-input{ width: 100%; height: 100%; padding: 2px 10px; border:1px solid #CCC; box-sizing: border-box; line-height: 24px; cursor: pointer; }
ul{ height:92px; margin:0; padding:0; border:1px solid #ccc; border-top:0px; list-style:none; overflow:scroll; overflow-x:hidden; }
ul li{ height:24px; padding:0 10px; font-size:14px; line-height:24px; cursor:pointer; }
ul .selected{ background-color:#BC0902; color:#FFF; }
</style>
</head>
<body>
<div class="show-part">
<input class="select-input" type="text" value="请选择分类" readonly>
</div>
<ul style="display: none;">
<li class="selected">请选择分类</li>
<li title="水果类">水果类</li>
<li title="蔬菜类">蔬菜类</li>
<li title="瓜果类">瓜果类</li>
<li title="干货类">干货类</li>
<li title="生鲜类">生鲜类</li>
<li title="饮品类">饮品类</li>
</ul>
<!--[if !IE]><!-->
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->
<script>
$(document).ready(function(){
$(".select-input").on("click",function(){
$("ul").fadeIn(800);
});
$("ul li").hover(function(){
$(this).addClass("selected").siblings().removeClass("selected");
}).on("mouseup",function(){
$("ul").fadeOut();
var txt = $(this).html();
var input = document.getElementsByTagName("input");
input[0].value = txt;
});
});
</script>
</body>
</html>