CSS三級表單是指CSS3中新增加的用于對表單進行美化和優(yōu)化的技術。三級表單的樣式功能更加豐富,能夠使表單更加美觀、易用,提高用戶交互性。
下面是一個例子,使用CSS三級表單對文本框、單選框和復選框進行樣式設計。
/*文本框樣式*/ input[type="text"]{ border: none; border-bottom: 2px solid #ccc; padding: 10px; font-size: 16px; background-color: #f5f5f5; border-radius: 5px; } /*單選框樣式*/ input[type="radio"]{ display: none; } input[type="radio"] + label{ border: 1px solid #ccc; padding: 10px; display: inline-block; margin-right: 10px; border-radius: 50%; } input[type="radio"]:checked + label{ background-color: #008080; color: #fff; } /*復選框樣式*/ input[type="checkbox"]{ display: none; } input[type="checkbox"] + label{ position: relative; padding-left: 25px; } input[type="checkbox"] + label:before{ content: ""; display: inline-block; position: absolute; width: 18px; height: 18px; left: 0; top: 0; border: 1px solid #ccc; background-color: #fff; border-radius: 3px; } input[type="checkbox"]:checked + label:before{ content: "?"; line-height: 18px; text-align: center; color: #008080; font-size: 16px; background-color: #fff; }
通過以上CSS代碼,我們可以對文本框、單選框和復選框分別進行樣式的調(diào)整,并達到優(yōu)化表單美觀和易用性的目的。