在網頁設計中,文本框是非常常用的元素之一。而對于文本框的樣式的控制中,CSS 扮演了非常重要的角色。除了常見的樣式修改,CSS 還可以使文本框的選中狀態變得更加美觀和易于操作。
/* 文本框選中狀態樣式 */ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border-color: #0073AA; box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); outline: none; } /* 禁用狀態樣式 */ input:disabled, textarea:disabled { background-color: #f2f2f2; border-color: #d9d9d9; color: #a6a6a6; cursor: not-allowed; } /* 選中文本樣式 */ ::selection { background-color: #0073AA; color: #fff; } /* 輸入框overflow樣式 */ ::-webkit-input-placeholder { color: #999; } :-moz-placeholder { color: #999; } ::-moz-placeholder { color: #999; } :-ms-input-placeholder { color: #999; }
上述的 CSS 樣式代碼中包含了一些常見的選中狀態樣式和禁用狀態樣式。同時,為了使用戶在選中文本時更加明顯,使用了選中文本樣式。此外,還可以改變文本框溢出時的樣式,使得輸入框更加美觀。
以上是一些基本的 CSS 樣式代碼,可以通過調整樣式來滿足個性化需求。值得注意的是,不同瀏覽器對于 input 和 textarea 的樣式支持存在差異,需要進行兼容性處理。
下一篇css文本樣式練習