移動(dòng)端的CSS表單設(shè)計(jì)是現(xiàn)代化網(wǎng)站的重要一環(huán)。只要設(shè)計(jì)得好，界面易用，用戶(hù)可以快速地在網(wǎng)站上完成從注冊(cè)到購(gòu)買(mǎi)等各種操作。

以下是一些常用的CSS表單美化技巧，可以基本上幫助你設(shè)計(jì)吸引人的表單。

/* 漸變色 CSS 按鈕 */
button {
background-image: gradient(to bottom, #4eb5f1, #44a1db 50%, #3898d9 50%, #3898d9);
border: 1px solid #2980b9;
}
/* 邊框線框 */
input[type="text"],
input[type="password"]{
border:1px solid #d3d3d3;
padding:10px;
outline:none;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* 圓角輸入框 */
input[type="text"],
input[type="password"]{
border-radius:25px;
}
/* 文本框字?jǐn)?shù)提示樣式 */
textarea {
resize: none;
}
textarea:focus:after {
content: attr(maxlength);
position: absolute;
bottom: 0;
right: 0;
padding: 2px;
}
/* 表單富文本編輯器 */
.ck-editor {
background-color: #f1f1f1;
}
/* 單選框樣式 */
input[type="radio"] {
display: none;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
margin-right: 5px;
border-radius: 50%;
}
input[type="radio"] + label {
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
input[type="radio"] + label:hover:before {
background-color: #ccc;
}
input[type="radio"]:checked + label:before {
background-color: #12A3B3;
}

當(dāng)然，以上技巧僅是幾個(gè)最基本的表單裝飾樣式。要實(shí)現(xiàn)一個(gè)用戶(hù)友好的表單，需要特地考慮哪些元素需要哪些樣式其他元素樣式的搭配等等。最重要的是：保持對(duì)用戶(hù)的思考和關(guān)注。如果表單可以快速而準(zhǔn)確地幫助用戶(hù)完成任務(wù)，你就已經(jīng)立于新一代移動(dòng)應(yīng)用設(shè)計(jì)的領(lǐng)先地位。