css修改下拉式清單select預設樣式的執行個體

來源:互聯網
上載者:User

select的一些預設樣式我們很難修改,比標的替換。接下來就說說如何修改這些預設樣式,希望本文能協助到大家。

給select添加父元素p目的是為了,用p的樣式覆蓋住select樣式。

css代碼:

        p{            //用p的樣式代替select的樣式            width: 200px;            height: 40px;            border-radius: 5px;            //盒子陰影修飾作用,自己隨意            box-shadow: 0 0 5px #ccc;            position: relative;        }        select{            //清除select的邊框樣式            border: none;            //清除select聚焦時候的邊框顏色            outline: none;            //將select的寬高等於p的寬高            width: 100%;            height: 40px;            line-height: 40px;            //隱藏select的下拉表徵圖            appearance: none;            -webkit-appearance: none;            -moz-appearance: none;            //通過padding-left的值讓文字置中            padding-left: 60px;        }        //使用偽類給select添加自己想用的表徵圖        p:after{            content: "";            width: 14px;            height: 8px;            background: url(img/xiala.png) no-repeat center;            //通過定位將表徵圖放在合適的位置            position: absolute;            right: 20px;            top: 45%;            //給自訂的表徵圖實現點擊下來功能            pointer-events: none;        }

select的一些預設樣式我們很難修改,比標的替換。接下來就說說如何修改這些預設樣式:html代碼:

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.