:out-of-range仅在input设min/max、type为number/date/time等且值合法时生效，不响应js赋值，需checkvalidity()或dispatch input事件触发；非数字输入、ios粘贴、ie等需js兜底。

:out-of-range 能用，但只在特定条件下触发视觉反馈——它不是实时监听器，也不是校验开关，更不替代 JS 或后端验证。

为什么写了 :out-of-range 样式却没反应

根本原因几乎总是以下三点之一：

• input 没设 min 或 max 属性（哪怕只写一个也行），伪类直接不匹配
• type 不是 "number"、"date"、"time" 等原生支持范围的类型；type="text" 加了 min="0" 也完全无效
• min/max 值非法，比如 min=""、min="ten"、min="10px"，浏览器解析失败，伪类失效

调试建议：打开 DevTools，在 Elements 面板里手动改 value 为超界值（如 value="200"），再看该元素是否被标记为 :out-of-range 状态。

:out-of-range 不响应 JS 赋值，必须手动刷新校验状态

用 input.value = 150 或 input.setAttribute('value', '150') 后，样式不会更新——因为浏览器不把 JS 赋值当作用户交互，不触发原生校验流程。

要让样式同步，必须补一步：

• 调用 input.checkValidity()（只刷新状态，不弹提示）
• 或调用 input.reportValidity()（会弹原生气泡，适合提交前）
• 更贴近用户行为的做法：赋值后 dispatchEvent(new Event('input', { bubbles: true }))

注意：input[type="range"] 几乎永远不触发 :out-of-range，因为它的值会被浏览器自动截断到 [min, max] 内，JS 赋越界值也读不到原始非法值。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

怎么写出真正可见、可用的警告样式

单靠 border-color: red 很难被注意，尤其在密集表单中。推荐组合使用：

• border-color: #e53e3e + background-color: #fff5f5 + box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2)
• 搭配 :out-of-range:focus 强化聚焦态，避免干扰未激活字段
• 用相邻兄弟选择器显示提示文字：#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; color: #e53e3e; }
• 务必重置 outline（如 outline: none），否则和浏览器默认焦点环打架

别用 display: none 或 visibility: hidden 隐藏越界输入框——这会让屏幕阅读器跳过，破坏可访问性。

移动端和兼容性必须手动兜底

iOS 软键盘对 input[type="number"] 支持不一：可能弹出数字键盘，但允许用户粘贴字母或符号。此时 :out-of-range 完全不触发，因为非法输入走的是 :invalid 流程。

所以不能只靠伪类：

• 必须用 JS 监听 input 事件，用 parseInt(e.target.value) 实时判断数值是否越界
• 对非数字字符，用正则或 inputmode="numeric" + pattern="[0-9]*" 辅助拦截
• IE 完全不支持 :out-of-range，旧版 Edge（12 之前）也不支持；现代浏览器中 Chrome 53+、Firefox 50+、Safari 10.1+ 均支持

最易被忽略的一点：伪类只是 UI 反馈钩子，它既不阻止提交，也不修正值，也不保证用户看到提示——所有关键逻辑仍得靠 JS 和后端双重保障。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！