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>

Select下拉选择框的美化

猜你喜欢