在CSS中，您可以使用偽元素（::before或::after）來在文本框中添加小圖標(biāo)，這種方法允許您在文本框的內(nèi)容前后添加裝飾性的圖標(biāo)，如搜索圖標(biāo)、警告圖標(biāo)等，以下是一些示例代碼，展示如何在CSS中使用偽元素添加小圖標(biāo)：

示例1: 使用::before添加圖標(biāo)

.search-icon {
    position: relative;
    width: 200px;
    height: 30px;
    border: 1px solid #000;
    padding: 5px;
}
.search-icon::before {
    content: "??"; /* 使用Unicode搜索圖標(biāo) */
    position: absolute;
    left: 10px; /* 圖標(biāo)位置 */
    top: 50%; /* 圖標(biāo)垂直居中 */
    transform: translateY(-50%); /* 圖標(biāo)垂直居中 */
}

示例2: 使用::after添加圖標(biāo)

.alert-icon {
    position: relative;
    width: 200px;
    height: 30px;
    border: 1px solid #000;
    padding: 5px;
}
.alert-icon::after {
    content: "??"; /* 使用Unicode急救車圖標(biāo) */
    position: absolute;
    right: 10px; /* 圖標(biāo)位置 */
    top: 50%; /* 圖標(biāo)垂直居中 */
    transform: translateY(-50%); /* 圖標(biāo)垂直居中 */
}

示例3: 使用背景圖片添加圖標(biāo)

除了使用偽元素和Unicode字符，您還可以使用背景圖片來添加圖標(biāo)，這種方法可以允許您使用自定義的圖標(biāo)，并且可以通過CSS控制圖標(biāo)的顯示位置和大小，以下是一個示例：

.custom-icon {
    position: relative;
    width: 200px;
    height: 30px;
    border: 1px solid #000;
    padding: 5px;
    background-image: url('path-to-your-custom-icon.png'); /* 替換為自定義圖標(biāo)的路徑 */
    background-repeat: no-repeat; /* 不重復(fù)背景圖片 */
    background-position: left center; /* 圖標(biāo)位置 */
}

在CSS中，您可以通過偽元素、Unicode字符或背景圖片來在文本框中添加小圖標(biāo)，每種方法都有其適用場景，您可以根據(jù)自己的需求選擇***適合的方法，希望這些示例能幫助您快速上手CSS文本框加小圖標(biāo)的技巧！