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

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>