CSS細邊框文本框是在前端開發中常用的文本輸入用品。通過CSS的border屬性可以實現各種粗細不等的邊框樣式,同時在輸入框內預填文字,讓頁面更加美觀。
input { border: 1px solid #ddd; border-radius: 5px; padding: 10px; font-size: 14px; }
在以上的代碼中,我們使用了border屬性來定義輸入框的邊框線,solid指定為實線,#ddd是灰色的顏色值。border-radius屬性可以設置圓角大小,這里設置為5px。padding屬性可以設置輸入框內的填充大小,讓文字與邊框之間有一段間隙,使頁面更加美觀。font-size屬性可以設置文字大小。
當然,以上只是一種簡單的設置方式,我們還可以進一步優化樣式,例如設置背景、邊框顏色,讓輸入框更加美觀。
input[type="text"], input[type="password"], textarea { border: 1px solid #ddd; border-radius: 5px; padding: 10px; font-size: 14px; background-color: #f3f3f3; } /* 輸入框獲得焦點時,邊框顏色變為橙色 */ input:focus, textarea:focus { outline:none; border-color: #FF9900; box-shadow: 0 0 10px #FF9900; }
在以上代碼中,我們使用了input[type="text"], input[type="password"], textarea來選擇需要設置樣式的輸入框類型。加入了background-color屬性,將輸入框的背景顏色設置為#f3f3f3。同時,我們還加入了:focus偽類,使得當輸入框獲得焦點時,邊框顏色會變為橙色,并且邊框會有少許陰影。
細邊框文本框不僅可以美化頁面,還可以提高用戶的體驗感。通過不斷優化樣式,可以讓用戶對我們的頁面印象更深刻。