文本框右側的圖標是實現更好交互性的一種方式，很多常見的輸入框和搜索框都使用這種方式來提高用戶體驗。CSS預處理器和庫可以提供很多選項來實現這個效果，但是用純CSS也并不難，下面我們將介紹一些如何實現文本框右側圖標的技巧。 首先，我們需要一個文本框或搜索框作為例子。我們需要在這個文本框的HTML代碼中添加一個包含圖標的div元素。我們使用偽元素將這個div元素的自帶圖標隱藏，并在偽元素中添加我們需要的圖標。如下： ```html``` 現在我們需要用CSS來添加這個圖標，如下： ```css .search-box { position: relative; } .search-box .icon { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 20px; height: 20px; background-image: url('/path/to/image.png'); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; } .search-box input { padding-right: 30px; } ``` 在這段CSS代碼中，我們用相對定位來為搜索框動態分配空間，并使用絕對定位來定位圖標。transform屬性可以使我們定位的圖標垂直居中。我們還使用背景圖像為圖標添加必要的樣式，并使用padding屬性來使文本框留出足夠的空間。 通過以上代碼，我們就實現了文本框右側圖標的效果。你可以自由調整圖標的大小、位置、顏色和樣式，以適應你的項目需求。實現這個效果不要求使用任何預處理器或第三方庫，只需要基本的HTML和CSS技能即可。祝你成功！