表單 · 前端

[select在個瀏覽器的默認樣式及美化](https://blog.csdn.net/weixin_32955881/article/details/118115019?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-118115019-blog-81481396.pc_relevant_aa2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-118115019-blog-81481396.pc_relevant_aa2&utm_relevant_index=1) 設置文本框或者輸入框的 placeholder 顏色 ## [CSS中appearance屬性的使用方法](https://blog.csdn.net/webofrxy/article/details/79853710) ``` input::-webkit-input-placeholder { /* WebKit browsers，webkit內核瀏覽器 */ color: #ccc; font-size: 16px; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc; font-size: 16px; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; font-size: 16px; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #ccc; font-size: 16px; } ``` 美化select ``` <html><head> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script> <style type="text/css"> ul li{ list-style: none; } .test { position: relative; float: left; width: 120px; height: 40px; padding-left: 11px; font-size: 15px; line-height: 40px; cursor: pointer; border: 1px solid #d2d2d2; border-radius: 3px; margin-right: 20px; outline: none; } .test:before { position: absolute; right: 13px; top: 18px; width: 0; height: 0; content: ""; border-width: 8px 8px 0 8px; border-style: solid; border-color: #d36969 transparent; -webkit-transition: transform .25s; -moz-transition: transform .25s; -ms-transition: transform .25s; -o-transition: transform .25s; transition: transform .25s; } .test:after { position: absolute; right: 15px; top: 18px; width: 0; height: 0; content: ""; border-width: 6px 6px 0 6px; border-style: solid; border-color: #fff transparent; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .test.active:before{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .test.active:after{ top: 20px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .test .dropdown { position: absolute; right: 0; left: 0; display: none; padding: 0; border-radius: inherit; border: 1px solid #d2d2d2; box-shadow: 2px 2px 5px rgba(0,0,0,.4); } .test.active .dropdown { display: block; } .test .dropdown:before { position: absolute; right: 13px; bottom: 100%; width: 0; height: 0; content: ""; border-width: 0 8px 8px 8px; border-style: solid; border-color: #d2d2d2 transparent; } .test .dropdown:after { position: absolute; right: 15px; bottom: 100%; width: 0; height: 0; content: ""; border-width: 0 6px 6px 6px; border-style: solid; border-color: #fff transparent; } .test .dropdown li { float: left; width: 129px; font-size: 14px; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; text-align: center; } .test .dropdown li:first-of-type { border-radius: 3px 3px 0 0; } .test .dropdown li:last-of-type { border-radius: 0 0 3px 3px; } .test .dropdown li:hover { color: #fff; background: #c43c3d; } </style> </head> <body> <div id="type" class="test"> <span>投資種類</span> <ul class="dropdown"> <li>期貨</li> <li>股票</li> <li>期權</li> </ul> </div> <div id="kind" class="test"> <span>投資類型</span> <ul class="dropdown"> <li>趨勢</li> <li>震蕩</li> <li>套利</li> <li>選股</li> <li>擇時</li> </ul> </div> </div> <script type="text/javascript"> function DropDown(el) { this.dd = el; this.span = this.dd.children('span'); this.li = this.dd.find('ul.dropdown li'); this.val = ''; } DropDown.prototype.initEvents = function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active').siblings().removeClass('active'); event.stopPropagation(); }); obj.li.on('click', function() { var opt = $(this); obj.val = opt.html(); if (obj.span.html() == obj.val) return; obj.span.html(obj.val); $(document).click(function() { $('.test').removeClass('active'); }); }) } var test1 = new DropDown($('#type')); var test2 = new DropDown($('#kind')); test1.initEvents(); test2.initEvents() </script> </body></html> ``` ![](https://img.kancloud.cn/a8/e8/a8e8d4e0bdcf08deea8a2df9131b18e7_297x194.png) ``` div{ position: relative; >select{ width: 110px; height: 48px; border: #2E9CFB 1px solid; border-radius: 15px 0 0 15px; padding-left: 12px; padding-right: 40px; text-align: right; color: #2F2F2F; line-height: 48px; font-size: 18px; font-family: MicrosoftYaHei; appearance:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; -khtml-appearance:none; &::-ms-expand { display: none; } } &::after{ content: '\e6eb'; font-weight: 900; font-family: 'iconfont'; width: 10px; height: 10px; position: absolute; right: 20px; bottom: 19px; } } ``` ``` <div> <select name="" class="product" style="width: 110px;"> <option value="1">產品</option> <option value="2">bbbbbbbbbbbbbb</option> <option value="3">cccccccccccccc</option> </select> </div> ``` ![](https://img.kancloud.cn/e7/09/e709326795456517b16e5f1c43fdca72_119x54.png)