改變Select三角樣式

改變小三角

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    select {
        /*Chrome和Firefox裏面的邊框是不一樣的,所以複寫了一下*/
        border: solid 1px #000;
        /*很關鍵:將默認的select選擇框樣式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*在選擇框的最右側中間顯示小箭頭圖片*/
        background: url("images/z.png") no-repeat 220px center transparent;
        /*爲下拉小箭頭留出一點位置,避免被文字覆蓋*/
        padding-right: 14px;

    }
    /*清除IE的默認選擇框樣式清除,隱藏下拉箭頭*/
    select::-ms-expand {display: none;}
</style>
<body>
<select name="" id="myselect" onchange="show()">
    <option value="">--請選擇--</option>
    <option value="">1</option>
    <option value="">2</option>
</select>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章