表單輸入框是Web開發中常見的元素,通過CSS樣式的調整可以讓表單輸入框更加美觀、易用。以下是一些常用的表單輸入框CSS樣式:
/* 輸入框的基本樣式 */ input[type="text"],input[type="password"],textarea{ padding:8px 10px; border:1px solid #ccc; border-radius:4px; outline:none; font-size:14px; } /* 輸入框獲得焦點時邊框和背景色的變化樣式 */ input[type="text"]:focus,input[type="password"]:focus,textarea:focus{ border:1px solid #1e87f0; background-color:#f8f8f8; } /* 輸入框的禁用樣式 */ input[type="text"]:disabled,input[type="password"]:disabled,textarea:disabled{ background-color:#f2f2f2; color:#9e9e9e; cursor:not-allowed; }
通過以上樣式的調整,可以使表單輸入框更加清爽美觀、易用。需要注意的是,在應用樣式時,要兼顧用戶體驗和網站整體風格。