select去除預設樣式
阿新 • • 發佈:2018-11-21
效果如下:
<style> .box { border: 1px solid #bbb; border-radius: 1px; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); width: 300px; background: #f3f3f3; } .custom-select { position: relative; } .custom-select select { width: 100%; -webkit-border-radius: 0; -webkit-appearance: none; /*去除下拉框預設樣式*/ border: 0; text-indent: 10px; } .custom-select::after { content: ""; position: absolute; width: 0px; height: 0px; top: 50%; right: 8px; margin-top:-4px; border:8px solid #929497; border-width: 8px 5px 8px; border-color: #f60 transparent transparent transparent; z-index: 2; pointer-events:none; } .custom-select:hover { border:1px solid #f60; } .custom-select select:focus { outline:none; /*box-shadow: 0 0 1px 3px rgba(180,222,250, 1);*/ background-color:transparent; color: #222; } .custom-select option { font-weight:normal; } </style> <div class="box custom-select"> <select name="" id=""> <option value="選擇1">選擇1</option> <option value="選擇2">選擇2</option> <option value="選擇3">選擇3</option> <option value="選擇4">選擇4</option> </select> </div>