CSS文本框怎么添加圖標(biāo)

在CSS中，我們可以使用偽元素來在文本框中添加圖標(biāo)，偽元素可以讓我們?cè)诓恍薷腍TML結(jié)構(gòu)的情況下，給元素添加一些裝飾性的內(nèi)容，下面是一個(gè)簡(jiǎn)單的例子，展示了如何在CSS文本框中添加一個(gè)圖標(biāo)：

HTML結(jié)構(gòu)：

<div class="text-box">
  <input type="text" placeholder="請(qǐng)輸入文本...">
</div>

CSS樣式：

.text-box input {
  padding-left: 30px; /* 留出圖標(biāo)的位置 */
}
.text-box::before {
  content: url('path/to/your/icon.png'); /* 替換成你的圖標(biāo)路徑 */
  position: absolute;
  left: 10px; /* 調(diào)整圖標(biāo)的位置 */
  top: 50%; /* 調(diào)整圖標(biāo)的位置 */
  transform: translateY(-50%); /* 使圖標(biāo)垂直居中 */
}

在這個(gè)例子中，我們首先在CSS中給.text-box添加了一個(gè)偽元素::before，然后通過content屬性將圖標(biāo)路徑設(shè)置為其內(nèi)容，我們通過position屬性將圖標(biāo)定位在文本框的左側(cè)，并通過transform屬性使其垂直居中，我們通過padding-left屬性在輸入框中留出圖標(biāo)的位置。

在實(shí)際應(yīng)用中，你可能需要根據(jù)自己的需求調(diào)整圖標(biāo)的大小、顏色和位置等屬性，由于偽元素是CSS中的一個(gè)***特性，因此并非所有的瀏覽器都支持它，在使用時(shí)，請(qǐng)確保你的目標(biāo)瀏覽器支持偽元素的使用。