在输入框内添加按钮

Question

我有一个搜索表单，我想在其右侧添加搜索按钮，如下所示：

这是我的表单的代码：

 <form action="search.php" method="post" class="index-search-form">
                <input name="search" type="text" class="" placeholder="&#xf002;  What are you looking for?">
                <button name="submit" class="" type="submit">Search</button>
            </form>

原文由 PapT 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果要在输入字段内设置按钮。您需要使按钮位置绝对。与表单位置相关并设置显示：inline-flex 或 inline-block 或 initial（对于 initial，您需要调整按钮或输入字段的填充顶部和底部）。我为输入字段设置了宽度，以便文本清晰可见。我只为输入字段添加一个类。如果您有任何问题，请在评论中问我。谢谢。 LiveOnFiddle

 form.index-search-form {
  position: relative;
  display: inline-flex;
}

button[name="submit"] {
  position: absolute;
  top: 0;
  right: 0;
}

input.search-box {
  width: 250px;
  font-family: FontAwesome;
  padding: 2px 0;
}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<form action="search.php" method="post" class="index-search-form">
  <input name="search" type="text" class="search-box" placeholder="&#xf002;  What are you looking for?">
  <button name="submit" class="" type="submit">Search</button>
</form>

原文由 Baezid Mostafa 发布，翻译遵循 CC BY-SA 3.0 许可协议