html - 将图像添加到输入标签

Question

我正在尝试使用输入创建搜索栏并向其添加 svg。这就是它的样子

这是我的代码

.search-input-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 18px 20px;
  z-index: 2;
}

<div class="col-4">
  <input type="text" class="form-control" placeholder="Search">
  <button type="submit" class="search-input-btn"><img src="assets/images/search-input-btn.svg"></button>
</div>

这就是到目前为止的样子

标签： htmlangular

Answer 1

您可以使用 transform 属性将其垂直对齐。

.search-input-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 18px 20px;
  z-index: 2;
transform:translateY(-50%);
}