Beautification of Select drop-down selection box

Beautification of Select drop-down selection box

1.1 CSS to modify the default style of the select drop-down box
1. Principle
        Clear the browser's default drop-down box style, and then customize the style, and then attach a small arrow image or use a triangular solid character.
2. Usage
select {
  /*Clear the default select box style, IE8/9 does not support the appearance:none CSS property*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
}
/* Clear ie's default selection box style clear, hide the drop-down arrow */
select::-ms-expand {display: none;}

Note: The above methods are not compatible with IE9 and below.
3. Compatible with low-version IE browsers,
        add a parent container to the select, the container is used to cover the small arrow, and then add a small offset to the right or the width is larger than the parent element for the select. Set the CSS property of the parent to be invisible (overflow: hidden;) to cover the small arrow.
        The disadvantage of this method is that the display of the drop-down box cannot be hidden, and the width of the drop-down option will be wider than its parent container, which looks a bit uncoordinated.
4. Examples
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Instance</title>
  <style>
    /* Clear ie's default selection box style clear, hide the drop-down arrow */
    select::-ms-expand {display:none;}
    select#selectTravelCity{
      width:185px;
      padding:0.2em 0.4em;
      cursor:pointer;
      /*The borders in Chrome and Firefox are different, so rewrite it*/
      border:1px solid #94c1e7;
      /* Clear the default select box style */
      -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>Remove select original style</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>Define New Style</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>Define New Style</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 Use js to customize the select display part to cover the original display part of the select.
1. Examples
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Instance</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>Use cash coupons</span>
	<select name="" id="">
		<option value="10 yuan cash coupon">10 yuan cash coupon</option>
		<option value="20 yuan cash coupon">20 yuan cash coupon</option>
		<option value="30 yuan cash coupon">30 yuan cash coupon</option>
		<option value="40 yuan cash coupon">40 yuan cash coupon</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 Use js to fully customize the select drop-down selection
1. Example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>Instance</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">Please select a category</li>
    <li title="Fruits">Fruits</li>
    <li title="Vegetables">Vegetables</li>
    <li title="Fruits">Fruits</li>
    <li title="Dry goods">Dry goods</li>
    <li title="Fresh class">Fresh class</li>
    <li title="Beverages">Beverages</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>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326394977&siteId=291194637