CSS3為輸入框提供了更多的樣式選擇。現在我們可以通過CSS3來增加輸入框的外觀色彩、形狀和動畫。
/* CSS3輸入框樣式 */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea { padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; box-shadow: none; outline: none; transition: all 0.4s ease; } /* 輸入框懸停效果 */ input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="password"]:hover, textarea:hover { border-color: #666; } /* 輸入框聚焦效果 */ input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, textarea:focus { border-color: #4CAF50; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); } /* 輸入框禁用效果 */ input[type="text"]:disabled, input[type="email"]:disabled, input[type="tel"]:disabled, input[type="password"]:disabled, textarea:disabled { background-color: #f1f1f1; }
以上是一組常用的CSS3輸入框樣式。代碼中使用了各種選擇器和CSS3屬性來實現不同的效果。例如,使用偽類:hover來定義鼠標懸停時的效果,使用偽類:focus來定義輸入框獲得焦點時的效果。輸入框的陰影效果是通過box-shadow屬性實現的。
在實際使用過程中,我們可以根據自己的需求和喜好來修改這些樣式。比如改變輸入框的顏色、邊框大小或者圓角程度等。