在網頁制作中,文本框是經常用到的元素,可以用來實現用戶輸入、留言板、搜索等功能,這一篇文章將向大家介紹使用CSS樣式建立文本框的方法。
首先,在HTML文檔中添加一個input標簽,如下:
<input type="text" name="text1" placeholder="請輸入內容">
其中,type屬性為text表示該文本框為輸入框,name屬性為text1表示該文本框的名字,placeholder屬性則為文本框添加一個提示信息,提示用戶輸入內容。
接下來,在CSS文件中添加樣式:
input[type="text"] { border: 1px solid #CCCCCC; padding: 5px; font-size: 16px; font-family: Arial, sans-serif; border-radius: 3px; }
上述代碼中,使用了屬性選擇器,選擇了type屬性為text的input元素,對它進行樣式設置。其中,border屬性為邊框,1px的實線為寬度,#CCCCCC為顏色,padding屬性為內邊距,設置為5px,font-size屬性為字號,設置為16px,font-family屬性為字體,設置為Arial, sans-serif,border-radius屬性為圓角半徑,設置為3px。
可以根據需要,對樣式進行調整,如修改顏色、字號等屬性。
通過上述設置,就可以建立一個簡單的文本框。