文本框是我們常常用到的一個元素,可以讓用戶輸入文字、數字、密碼等信息。在web開發中,我們可以使用css樣式來美化文本框,使其更加美觀和易于使用。
/* 定義文本框樣式 */ input[type="text"], input[type="password"], textarea { width: 300px; padding: 10px; border: none; outline: none; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); font-size: 14px; color: #333; } /* 定義聚焦時的樣式 */ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.2); } /* 定義禁用時的樣式 */ input[type="text"]:disabled, input[type="password"]:disabled, textarea:disabled { background-color: #ccc; color: #999; }
以上是一個簡單的文本框樣式定義,我們可以將其中的屬性值根據需求進行調整,比如更改寬度、背景色、字體大小等等,以達到最佳效果。