去除蘋果手機select 預設樣式
阿新 • • 發佈:2019-01-06
主要用的是
-webkit-appearance: none;/*相容蘋果手機*/
這是一個小demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .sel{ position: relative; width: 100px; } select{ -webkit-appearance: none;/*相容蘋果手機*/ border: 1px solid #EBEBEB; width: 100px; height: 25px; line-height: 25px; /*防止緊緊靠在邊上*/ text-indent: 2px; background-color: transparent; } .jt { display: inline-block; position: absolute; right: 2%; top: 0; height: 25px; width: 20px; background-image:url(images/jiantou.png); background-size: 150%; background-position: center -10px; z-index: -1000; } </style> </head> <body> <div class="sel"> <select> <option>請選擇</option> <option>9:30-10:30</option> <option>10:30-11:30</option> <option>11:30-12:30</option> <option>12:30-13:30</option> <option>13:30-14:30</option> <option>14:30-15:30</option> <option>15:30-16:30</option> </select> <span class="jt"></span> </div> </body> </html>
執行後是
小三角的圖示是
獲取小三角的連結是