在输入字段内添加按钮[重复]答案

【问题标题】：Add button inside input field [duplicate]在输入字段内添加按钮[重复]
【发布时间】：2017-05-30 09:10:21
【问题描述】：

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

这是我的表单的代码：

<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>

【问题讨论】：

Check this post. This might help you
您可以使用 Boostrap 吗？他们有你想要的带有内联按钮的输入字段。

标签： html forms

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用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>

【讨论】：

【解决方案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>

【讨论】：

不，他需要输入字段中的那个按钮。