表單框css是一個重要的前端技術,可以實現一些非常好看的表單設計。在下面的代碼示例中,我們將介紹如何使用css設置表單框。
/* 設置表單框外觀 */ input[type="text"], input[type="email"], textarea { border: 1px solid #ccc; padding: 10px; border-radius: 5px; } /* 設置表單框懸浮狀態下的效果 */ input[type="text"]:hover, input[type="email"]:hover, textarea:hover { border-color: #999; } /* 設置表單框獲取焦點時的效果 */ input[type="text"]:focus, input[type="email"]:focus, textarea:focus { outline: none; border-color: #3399ff; box-shadow: 0 0 5px #3399ff; } /* 設置表單框禁用時的效果 */ input[type="text"]:disabled, input[type="email"]:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }
以上代碼會分別設置文本框、郵箱框和文本域的樣式。border屬性定義表單框的邊框,padding屬性定義內邊距,border-radius屬性定義圓角半徑。
懸浮狀態和獲取焦點狀態下使用:hover和:focus偽類設置樣式的效果。outline屬性用于定義表單框獲得焦點時的外觀,box-shadow屬性用于定義陰影效果。
最后,針對禁用狀態,設置樣式來給用戶一個明確的反饋信息。opacity屬性設置透明度,cursor屬性定義鼠標懸停的光標樣式。
通過以上簡單的CSS代碼,我們就可以輕松的設置表單框樣式了!