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>