在输入字段内添加按钮

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>

Answer 1

使用position和padding来完成此效果。

form {
  display: inline-block;
  position: relative;
}
form input {
  padding-right: 4.6em;
}
form button {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.4em;
}

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

Answer 2

如果要在输入字段中设置按钮。您需要使按钮位置绝对。并且表格位置相对和设置显示：inline-flex或inline-block或initial（对于initital，您需要调整填充顶部和底部的按钮或输入字段）。我为输入字段设置了宽度，因此文本将清晰可见。我为输入字段添加了一个类。如果您有任何疑问，请在评论中提问我。谢谢。 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>

Answer 3

你的意思是这样的想法吗？

.index-search-form {
    display: flex;
}

.inputField {
    flex: 1;
}

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