欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

相关标签: html css js