在網頁開發中,表單是最常用的元素之一,而表單的輸入框是表單的核心組件。CSS 可以幫助我們美化文本框,使其更美觀和易于使用。
最常用的屬性是border
、background-color
和padding
。例如,我們可以用下面代碼設置文本框的樣式:
input[type="text"] { border: 1px solid #ccc; background-color: #fff; padding: 5px; }
這里我們使用了input[type="text"]
選擇器,表示只對類型為文本的輸入框進行樣式設置。如果我們使用的是文本域,可以使用textarea
的選擇器:
textarea { border: 1px solid #ccc; background-color: #fff; padding: 5px; }
除此之外,還有一些其他的屬性可以調整文本框的樣式。例如,我們可以設置文本框文字的顏色:
input[type="text"] { color: #000; }
如果我們希望在用戶輸入文字時,文本框周圍會出現邊框效果,我們可以使用:focus
偽類:
input[type="text"]:focus { border: 1px solid blue; }
最后,我們需要注意的是,不同瀏覽器對表單元素的默認樣式以及渲染方式可能會不同。所以,我們在編寫樣式時需要測試不同瀏覽器的表現。
上一篇鏈接式css樣式表的含義
下一篇鏈入式引入CSS樣式表