<分区>
我想知道如何在文本框中对齐搜索图标，就像 Google 的搜索栏一样
像这样:
这就是我得到的，但是我不知道怎么做:
我试图避免使用 Bootstrap 或任何库。我想尽可能地保持原汁原味。
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
}<form class="search-bar-form">
<input id="search-bar" type="text" href="#" />
<img src="https://via.placeholder.com/24" />
</form>最佳答案
您可以将图片作为文本框的背景:
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
background-image: url(https://via.placeholder.com/24);
background-position: 10px center;
background-repeat: no-repeat;
padding-left: 40px;
}<form class="search-bar-form">
<input id="search-bar" type="text" value="text goes after the padding" />
</form>关于html - 如何在搜索框内对齐搜索图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69224446/