在CSS中,我們可以使用偽元素或者背景圖像來在文本框中添加圖標,這里,我們將使用偽元素的方法來實現(xiàn)。
我們需要創(chuàng)建一個文本框,可以使用HTML的<input>
或者<textarea>
元素來創(chuàng)建,我們可以使用CSS的偽元素:before
或者:after
來在文本框中添加圖標。
下面是一個示例代碼:
HTML代碼:
<input type="text" class="icon-textbox">
CSS代碼:
.icon-textbox { position: relative; } .icon-textbox:before { content: ""; position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background-image: url("icon.png"); /* 替換成你的圖標URL */ }
在這個示例中,我們創(chuàng)建了一個帶有類名icon-textbox
的文本框,并使用CSS的偽元素:before
來添加圖標,偽元素的內(nèi)容設置為空字符串""
,位置設置為***定位absolute
,并指定了top
和left
屬性來定位圖標,圖標的寬度和高度都設置為20px
,并使用background-image
屬性來指定圖標的URL。
你可以將上述代碼復制到你的HTML和CSS文件中,并根據(jù)你的需求進行調(diào)整,記得將圖標的URL替換成你實際使用的圖標URL。