1. 程式人生 > >取消 select 下拉框預設樣式

取消 select 下拉框預設樣式

select 下拉框 安卓和ios 的預設樣式不同,樂視手機下拉框會自帶下拉箭頭,這裡所以要取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
    <style type="text/css">
        select {
            /*Chrome和Firefox裡面的邊框是不一樣的,所以複寫了一下*/
            border: solid 1
px #000
; /*很關鍵:將預設的select選擇框樣式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*將背景改為綠色*/ background:green; /*留出一點位置,避免被文字覆蓋*/ padding-right: 14px; }
/*清除ie的預設選擇框樣式清除,隱藏下拉箭頭*/ select
::-ms-expand { display: none; }
</style> </head> <body> <select> <option>2342</option> <option>fsdfsdfd</option> <option>8430892304iokflsd</option> </select> </body> </html>