CSS如何設(shè)計(jì)出一個(gè)表單頁面

小編給大家分享一下CSS如何設(shè)計(jì)出一個(gè)表單頁面，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　/*placeholder字體顏色*/

　　::-webkit-input-placeholder{/*WebKitbrowsers*/

　　text-align:center;

　　color:RGB(154,171,180);

　　}

　　:-moz-placeholder{/*MozillaFirefox4to18*/

　　text-align:center;

　　color:RGB(154,171,180);

　　}

　　::-moz-placeholder{/*MozillaFirefox19+*/

　　text-align:center;

　　color:RGB(154,171,180);opacity:1;

　　}

　　:-ms-input-placeholder{/*InternetExplorer10+*/

　　text-align:center;

　　color:RGB(154,171,180)!important;

　　}

　　修改表單項(xiàng)樣式

　　select{

　　/*清除select的邊框樣式*/

　　border:none;

　　/*清除select聚焦時(shí)候的邊框顏色*/

　　outline:none;

　　/*隱藏select的下拉圖標(biāo)*/

　　appearance:none;

　　/*通過padding-left的值讓文字居中*/

　　padding-left:50px;

　　-webkit-appearance:none;

　　-moz-appearance:none;

　　width:370px;

　　line-height:41px;

　　height:41px;

　　border-radius:20px;

　　border:1pxsolidrgba(185,198,203,.5);

　　box-shadow:002px#ccc;

　　}

　　同理，input、button等表單項(xiàng)都可以通過這些不常見的屬性調(diào)整。

　　若想在表單項(xiàng)實(shí)現(xiàn)如下效果則可以：

　　使用偽類給select添加自己想用的圖標(biāo)

　　p:after{

　　content:"";

　　width:14px;

　　height:8px;

　　background:url(img/xiala.png)no-repeatcenter;

　　//通過定位將圖標(biāo)放在合適的位置

　　position:absolute;

　　right:20px;

　　top:45%;

　　//給自定義的圖標(biāo)實(shí)現(xiàn)點(diǎn)擊下來功能

　　pointer-events:none;

　　}

以上是“CSS如何設(shè)計(jì)出一個(gè)表單頁面”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！