在输入字段内放置问号提交按钮

Question

我有一个输入字段和一个提交按钮，由于 css 样式，它看起来像一个问号。 这是它目前的样子：

如何在输入字段中放置问号，如下所示：

HTML

<div class="div">
  <form method="post">
    <input type="text" class="input">
    <input type="submit" value="?" class="submit">
  </form>
</div>

CSS

.div {
  position: relative;
  top: 50%;
  transform: translateY(50%);
}

.input {
  display: block;
  margin: 0 auto;
  width: 50%;
}

.submit {
  background: none;
  border: none;
}

JsFiddle： https ://jsfiddle.net/TheCodesee/8h72tjcL/2/

Answer 1

您可以使用一些 CSS 将问号用作输入字段中的背景图像，例如：

.form-input {
  padding-right: 4rem;
  background-image: url(your image);
  background-repeat: no-repeat;
  background-position: center right 1rem;
  background-size: 2rem 2rem;
}

当然，您可能需要根据图像大小调整数字。 您的提交按钮可能仍然存在，但您想隐藏（通过visibility或display ）。 因此，用户仍然可以按回车键提交表单。 另一种可能性是在输入模糊时自动提交表单。

这样，您可以避免移动按钮本身。

Answer 2

在提交输入中使用position: absolute 。

 .div { position: relative; top: 50%; transform: translateY(50%); width: 50%; margin: 0 auto; } .input { display: block; margin: 0 auto; width: 100%; } .submit { border: none; background: none; outline: none; position: absolute; top: 2px; right: 0px; }

 <div class="div"> <form method="post"> <input type="text" class="input"> <input type="submit" value="?" class="submit"> </form> </div>