html - 如何在输入框中插入搜索按钮

Question

我想要实现的是在输入的末尾添加一个圆形搜索按钮，但不知何故我不明白如何这样做的逻辑。我使用 Font Awesome 作为图标的字体显示。

.search-box {
  outline: none;
  padding: 7px;
  padding-left: 10px;
  padding-right: 40px;
  height: 35px;
  width: 100%;
  border-radius: 30px;
  font-size: 15px;
  border-color: transparent;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

<input type="text" class="search-box" placeholder="Search For a Product..">

Answer 1

您不能放置 <button> (或任何其他元素)在 <input> 中.但是，您可以通过使用看起来像输入的包含元素来“伪造”它。然后，您可以使用所需的 CSS 样式将按钮放置在输入框的右侧，使其显示为圆形。试试这个:

.search-container {
  background-color: #FFF;
  position: relative;
  border-radius: 30px;
  padding: 3px 50px 3px 10px;
}
.search-box {
  background-color: transparent;
  outline: none;
  height: 35px;
  font-size: 15px;
  border: 0;
  width: 100%;
}
.search-button {
  position: absolute;
  right: 4px;
  top: 4px;
  background-color: #C00;
  border-radius: 50%;
  border: 0;
  color: #FFF;
  width: 35px;
  height: 35px;
  outline: 0;
}

body {
  background: #CCC;
}

<br /><br /><br />

<div class="search-container">
  <input type="text" class="search-box" placeholder="Search For a Product..">
  <button class="search-button">Go</button>
</div>