在網頁設計中,HTML文本框(Text Box)是非常常見的元素。我們可以通過CSS樣式來美化這些文本框,使其外觀更加符合網站整體風格。
首先,我們先來看一下HTML文本框怎么定義。
<input type="text">
以上代碼表示一個簡單的文本框,我們在外層套一層 form 標簽,然后給它的 action 屬性指定一個處理數據的 PHP 等腳本,就可以提交用戶的輸入內容了。
接下來,我們可以對文本框的樣式進行修改。下面是一些樣式代碼,可以讓您快速美化文本框:
input[type=text] { border: 2px solid #ccc; border-radius: 4px; padding: 10px; font-size: 16px; }
通過以上代碼,我們可以實現以下效果:
代碼解析:
border:文本框邊框樣式,2px 寬度,solid 邊框類型,#ccc 邊框顏色。
border-radius:文本框圓角大小,4px。
padding:文本框內部空隙大小,10px。
font-size:文本字體大小,16px。
以上僅僅是文本框樣式的一部分,通過 CSS 樣式表,我們可以對文本框的字體大小、顏色、默認值等多種屬性進行設置,可以根據實際需求自行調整。
上一篇html教程 css
下一篇css字體漂亮中文字體