使用CSS設計出一個表單頁面的方法

小編給大家分享一下使用CSS設計出一個表單頁面的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近做項目總能遇到各種各樣，千奇百怪的需求。用bootstrap等ui框架不能滿足客戶需求。只能開動自己腦筋，自己寫一些樣式。

• 如何調整input樣式（包括placeholder字體樣式）

/*placeholder字體顏色*/
::-webkit-input-placeholder { /* WebKit browsers */
    text-align: center;
    color:RGB(154,171,180);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-align: center;
    color:RGB(154,171,180);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-align: center;
    color:RGB(154,171,180);opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-align: center;
    color:RGB(154,171,180) !important;
}

• 修改表單項樣式

select{
 /*清除select的邊框樣式*/
    border: none;
 /*清除select聚焦時候的邊框顏色*/
    outline: none;
 /*隱藏select的下拉圖標*/
    appearance: none;
 /*通過padding-left的值讓文字居中*/
    padding-left: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 370px;
    line-height: 41px;
    height: 41px;
    border-radius: 20px;
    border:1px solid rgba(185,198,203,.5);
    box-shadow: 0 0 2px #ccc;
}

• 同理，input、button等表單項都可以通過這些不常見的屬性調整。

• 若想在表單項實現如下效果則可以：

使用偽類給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實現類似placeholder效果,則可以設置selected disabled dispaly:none;

<option value="placeholder" disabled selected style="display:none">選擇單位</option>

以上是使用CSS設計出一個表單頁面的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！