HTML Floating validation表单右侧红绿验证图标不显示如何解决？

你可以通过CSS伪类配合简单的JavaScript实现该效果，不需要修改现有HTML结构，具体操作如下：

1. 新增CSS样式 #

将以下代码放入页面<head>的<style>标签中，负责图标定位、状态样式控制：

/* 输入框父容器设置相对定位，用于定位图标 */
.column.half {
  position: relative;
  margin-bottom: 20px;
}
/* 输入框基础样式，预留右侧图标位置 */
.column.half input {
  width: 100%;
  padding: 10px 35px 10px 10px;
  box-sizing: border-box;
}
/* 生成右侧图标 */
.column.half::after {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  /* 默认隐藏图标 */
  display: none;
}
/* 已交互且验证通过的状态：显示绿色对勾 */
.column.half.touched:has(input:valid)::after {
  content: "✓";
  color: #2ecc71;
  display: block;
}
/* 已交互且验证不通过的状态：显示红色叉号 */
.column.half.touched:has(input:invalid)::after {
  content: "✕";
  color: #e74c3c;
  display: block;
}

备注：如果需要兼容不支持:has选择器的旧浏览器，可以调整JS逻辑直接给父元素添加valid/invalid类，再对应修改CSS选择器即可。

2. 新增交互逻辑 #

将以下代码放入页面</body>标签之前，负责判断输入框是否被用户交互过，避免页面刚加载就显示验证状态：

// 获取所有需要验证的输入框
const validateInputs = document.querySelectorAll('input[required]');
validateInputs.forEach(input => {
  // 失焦时标记为已交互
  input.addEventListener('blur', () => {
    input.parentElement.classList.add('touched');
  });
  // 输入时实时更新验证状态
  input.addEventListener('input', () => {
    if(input.parentElement.classList.contains('touched')) {
      // 触发浏览器重绘更新样式
      input.offsetHeight;
    }
  });
});

调整完成后，用户在输入框失焦后就会根据当前输入内容显示对应状态的图标，输入过程中也会实时更新验证状态。

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