Html 将问号“提交”按钮放在输入字段内

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

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

HTML

---

jshiddle:

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

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

当然，您可能需要根据图像大小调整数字。您的提交按钮可能仍然存在，但您希望隐藏（通过

可见性
或
显示
）。因此，用户仍然可以点击enter来提交表单。
另一种可能是在输入时自动提交表单

这样，您可以避免移动按钮本身。
在提交输入时使用
位置：绝对值


.div{
位置：相对位置；
最高：50%；
转化：translateY（50%）；
宽度：50%；
保证金：0自动；
}
.输入{
显示：块；
保证金：0自动；
宽度：100%；
}
.提交{
边界：无；
背景：无；
大纲：无；
位置：绝对位置；
顶部：2个；
右：0px；
}

我强烈建议您不要删除
元素的默认样式，除非您正在创建自己的自定义样式，否则无法直观地指示“？”字符是可单击的。至于让他们坐在一起？移除
显示：块
@DavidThomas我想我可以添加一个
光标：指针
，你可以，但你只是希望用户碰巧将光标移动到非常小的
元素上。“那么那些用键盘导航的用户呢？”DavidThomas我知道在某些情况下这并不理想，但这正是我想要的。这并没有真正回答我的问题，这更多的是一种解决方法。对于您的解决方案，将根本没有提交按钮。是的，您是对的。我没有注意到你想将提交按钮移动到输入中。如果没有绝对定位或任何类似的方法，我看不出你怎么能做到这一点。怎么了？我在帖子里稍微更新了一下代码。请检查它，如果可能的话，用您当前的代码更新您的答案，但输入文本必须具有100%的宽度，才能使
右侧
属性正常工作。
.div {
  position: relative;
  top: 50%;
  transform: translateY(50%);
}

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

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

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