如何在input输入框内嵌入按钮及实现表单错误提示效果

针对你提出的三个需求，这里采用flex容器+绝对定位的方案解决适配问题，具体实现如下：

1. 调整HTML结构 #

将输入框、错误图标、提交按钮放入统一容器，便于样式控制：

<form action="#">
  <div class="input-group">
    <input type="email" placeholder="Email Address">
    <img src="/images/icon-error.svg" alt="格式错误" class="error-icon">
    <button type="submit"><img src="/images/icon-arrow.svg" alt="提交"></button>
  </div>
  <small class="error-text">please provide a valid Email</small>
</form>

2. 修改CSS样式 #

通过容器模拟输入框外观，内部元素用定位实现嵌入效果：

/* 输入框容器：模拟输入框边框与圆角 */
.left .input-group {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid hsl(0, 36%, 70%);
  border-radius: 50px;
  width: 60%;
}

/* 输入框：去掉自身边框，占满容器空间 */
.left .input-group input {
  background-color: transparent;
  border: none;
  outline: none;
  padding: 13px 16px;
  flex: 1;
}

/* 错误图标：默认隐藏，定位在按钮左侧 */
.left .error-icon {
  position: absolute;
  right: 110px;
  display: none;
}

/* 提交按钮：垂直居中嵌入容器右侧 */
.left .input-group button {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
  border: none;
  border-radius: 50px;
  width: 100px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 错误提示文本：默认隐藏，错误时显示 */
.left .error-text {
  color: hsl(0, 93%, 68%);
  font-size: 12px;
  margin-top: 8px;
  margin-left: 16px;
  display: none;
}

/* 错误状态触发样式 */
.left .input-group.error {
  border-color: hsl(0, 93%, 68%);
}
.left .input-group.error .error-icon {
  display: block;
}
.left .input-group.error + .error-text {
  display: block;
}

3. 功能说明 #

• 按钮通过绝对定位+垂直居中实现完美嵌入，不会因屏幕尺寸变化错位；
• 错误图标默认隐藏，触发错误时给.input-group添加error类即可显示；
• 提示文本默认隐藏，错误状态下随图标一同展示在输入框下方左侧。

你可以通过JavaScript判断邮箱格式是否有效，动态添加/移除error类来触发错误样式。

内容的提问来源于stack exchange，提问作者Najad