一个select元素自定义设计的新思路：appearance: none之后利用符号制造小箭头
最近工作時解決了一個前端小問題（如下圖所示）：在Safari中，select的控件之上有不和諧的灰色部分。 剛開始時我以為是backgrand或是border設置不當之類產生的問題，在搜索了很久之后終于找到了問題所在：這個灰色部分來自于Safari默認的select設計，所以我需要用?appearance: none?來去除默認設計，但是這樣一來，右側的小箭頭就會消失。本文將會詳細描述我是如何添加小箭頭的，該方法靈感來自于上司，目前沒有在網上找到類似答案（當然網上也有不少別的好方法：比如使用background添加一個url的小箭頭圖片）。
我先直接附上我的方法，采用了一個自己編的例子便于講解。
1 <html> 2 <head> 3 <style type="text/css"> 4 #selectDiv select { 5 -webkit-appearance: none; 6 -moz-appearance: none; 7 -ms-appearance: none; 8 width: 100px; 9 background-color: transparent; 10 font-size: 16px; 11 padding: 3px 15px; 12 margin: 0;} 13 #selectDiv { 14 width: 100px; 15 } 16 #selectDiv:after { 17 content: '<>'; 18 font: 13px Consolas,monospace; 19 color: #000; 20 font-weight: 700; 21 -webkit-transform: rotate(90deg); 22 -moz-transform: rotate(90deg); 23 -ms-transform: rotate(90deg); 24 transform: rotate(90deg); 25 position: absolute; 26 left: 85px; 27 top: 14px; 28 pointer-events: none; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="selectDiv"> 34 <select> 35 <option value="apple">Apple</option> 36 <option value="banana">Banana</option> 37 <option value="orange">Orange</option> 38 <option value="pear">Pear</option> 39 </select> 40 </div> 41 </body> 42 </html>Safari (11.1)和Chrome (66.0.3359.139) 中最終的效果如下圖：
Firefox (59.0.2) 中最終的效果如下圖：?
以上存在差別是由于依然還有默認的border設置，所以只需要再加上自定義的border設置就好了。?
?
（如果你看懂了上面的代碼，那你就不需要繼續看下面的解釋；如果你對其中的css有疑惑，那么你可能可以從下文中找到答案。如果你看完本文后有任何意見，歡迎留言。）
?
基本思路
簡而言之，就是將<>符號旋轉九十度就能得到一個類似于向上向下的小箭頭，很簡潔，而且可以根據自己的喜好調整大小粗細和風格。
部分CSS詳解及注意事項
1.??::after (:after)?
這是偽元素，兩個冒號是CSS3中的寫法，是為了將其與偽類（:hover/:active等）區分。一個冒號是CSS2中的寫法，但是為了兼容，很多瀏覽器依然支持一個冒號的寫法。這個能產生一個在原有元素之后的元素，默認是與原有元素在同一行的。我認為用這個偽元素比另建一個div更方便。
2.??-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none;?
這個作用就是去除瀏覽器中默認的格式，-webkit- 作用于Chrome，-moz-作用于Firfox，-ms-作用于IE，相同的道理也適用于之后的transform。
3. <>字體需要挑選
這兩個符號在某些字體時可能會連接在一起或是形狀不合適，所以需要挑選合適的字體以得到滿意的圖案。效果圖中展示的是Consolas字體，另外我還寫了另一個字體monospace備選。后者的形狀會尖一些。建議大家再嘗試看看別的字體，也許有更合適的。另外，符號是否加粗和字體大小就全憑個人感覺了。
4.??pointer-events: none;?
加上這句的效果直接體現在點擊符合與點擊框中別的地方的效果相同，如果少了這段文字，則會使點擊符號時選項不會展開。某官方解釋是“元素永遠不會成為鼠標事件的target。但是，當其后代元素的pointer-events屬性指定其他值時，鼠標事件可以指向后代元素，在這種情況下，鼠標事件將在捕獲或冒泡階段觸發父元素的事件偵聽器。”大家自行理解一下。
5. 在select之外包裹div
我在select之外加了父元素，因為我發現我無法直接添加select:after。（如果有人知道原因，歡迎留言！）
?
轉載于:https://www.cnblogs.com/zhenqichai/p/a-way-to-change-default-design-of-select-component.html
總結
以上是生活随笔為你收集整理的一个select元素自定义设计的新思路：appearance: none之后利用符号制造小箭头的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 美团骑手app如何在范围外打卡
- 下一篇： 直接在apk中添加资源的研究