CSS盒子里怎么放搜索圖標(biāo)

在CSS中，我們可以使用偽元素來在盒子里放置搜索圖標(biāo)，我們需要?jiǎng)?chuàng)建一個(gè)搜索圖標(biāo)的CSS樣式，并將其應(yīng)用到一個(gè)偽元素上，我們可以將該偽元素放置到盒子中，并調(diào)整其位置。

下面是一個(gè)示例代碼：

HTML代碼：

<div class="search-box">
  <input type="text" class="search-input">
  <div class="search-icon"></div>
</div>

CSS代碼：

.search-box {
  position: relative;
  width: 200px;
  height: 30px;
  border: 1px solid #000;
  border-radius: 5px;
}
.search-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 30px;
  border: 0;
  outline: 0;
}
.search-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: url('search-icon.png') no-repeat center center;
  border: 0;
  outline: 0;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為.search-box的盒子，其中包含一個(gè)輸入框和一個(gè)搜索圖標(biāo)，我們使用偽元素.search-icon來放置搜索圖標(biāo)，并將其位置設(shè)置為盒子的右側(cè)，通過調(diào)整.search-icon的寬度和高度，我們可以控制圖標(biāo)的大小，我們還使用背景圖像來顯示搜索圖標(biāo)，在實(shí)際應(yīng)用中，我們可以根據(jù)需要自定義搜索圖標(biāo)的樣式和位置。