css选择器伪类:valid和:invalid表单校验样式不生效_通过属性匹配处理

顺亿
2026-09-22 • 👁 0人浏览过
:valid 和 :invalid 伪类仅响应原生HTML5表单验证，需存在required、type、pattern等约束属性才能生效；JS手动校验应改用aria-invalid或data-valid属性配合CSS控制。为什么
:valid
和
:invalid
伪类不触发样式？根本原因在于：这两个伪类只响应浏览器原生表单验证（HTML5 Constraint Validation API），不响应 JavaScript 手动设置的
setCustomValidity()
或 DOM 属性变更。如果表单控件没有
required
、
type="email"
、
pattern
等约束属性，或者值始终被 JS 清空/重置却未触发
checkValidity()
，浏览器就无法计算出有效的
validity
状态，
:valid
:invalid
自然不会生效。必须确保 HTML 层面存在可触发验证的约束属性仅靠 CSS 写
:invalid { border-color: red; }
是无效的，前提得让元素“能被验证”。常见遗漏点：
缺少
required
、
type
（如
email
、
url
、
number
）或
pattern
</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><select></code></div>
没有
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">required</code></div>
，且无其他约束（
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">select</code></div>
的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">required</code></div>
只对非空
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">value</code></div>
生效，需确保默认
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><option></code></div>
的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">value=""</code></div>
）
自定义组件（如封装的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><my-input></code></div>
）未透传原生约束属性，导致内部
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><input></code></div>
实际没绑定验证逻辑
用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">[aria-invalid]</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">[data-valid]</code></div>
配合 JS 主动控制状态
当需要脱离原生验证流程（比如异步校验、组合字段校验），推荐用属性匹配替代伪类。这样可控、可预测，也兼容旧浏览器：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
JS 校验后显式设置
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.setAttribute('aria-invalid', 'true')</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.dataset.valid = 'false'</code></div>
CSS 写成
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input[aria-invalid="true"] { border-color: #d32f2f; }</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input[data-valid="false"] { outline: 2px solid #f44336; }</code></div>
注意：用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">aria-invalid</code></div>
更语义化，但需配合
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">aria-describedby</code></div>
提供错误说明；
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">data-</code></div>
属性更自由，但需自行管理可访问性
务必在每次校验后统一更新属性，避免残留旧状态（例如用户输入中就触发校验，不要等失焦才设）
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:valid</code></div>
/
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:invalid</code></div>
的样式时机与性能细节
这两个伪类是实时响应的，但触发时机有隐含条件：
立即学习
“
前端免费学习笔记（深入）
”；
初始渲染时，若字段为空且
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">required</code></div>
，多数浏览器会立即应用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:invalid</code></div>
；但 Safari 在首次聚焦前可能不渲染，需加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:user-invalid</code></div>
兜底（仅 Safari 支持）
输入过程中，部分浏览器（Chrome）会在每次 keystroke 后重新评估，而 Firefox 可能延迟到失焦——这会导致样式闪烁或不同步
避免在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:invalid</code></div>
中写高开销样式（如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.3);</code></div>
+ 过渡动画），容易引发重绘抖动
若同时用 JS 控制和伪类，优先级上内联
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">style</code></div>
> CSS 属性选择器 > 伪类，容易覆盖失效，建议二选一，别混用
实际中最容易被忽略的是：把校验逻辑和样式响应割裂开——以为写了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:invalid</code></div>
就万事大吉，却没检查 HTML 是否真具备验证能力，也没考虑 JS 干预后的状态同步机制。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="cxy-article-nav" aria-label="文章导航">

    
                                <a href="https://www.vqhf.com/article/11429.html" class="cxy-article-nav-link cxy-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="cxy-article-nav-label">上一篇</div>
                                        <div class="cxy-article-nav-title">【译】粘连 Footer 的 5 种方法 | CSS-Tricks_html/css_WEB-ITnose</div>
                                    </div>
                                </a>
    


    
                                <a href="https://www.vqhf.com/article/11528.html" class="cxy-article-nav-link cxy-article-nav-next">
                                    <div>
                                        <div class="cxy-article-nav-label">下一篇</div>
                                        <div class="cxy-article-nav-title">css边框显示不出来怎么办</div>
                                    </div>
                                    <span>›</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="cxy-content-section" style="margin-top: 20px;">
                        <h2 class="cxy-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="cxy-article-list">

    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11429.html" class="cxy-article-link">【译】粘连 Footer 的 5 种方法 | CSS-Tricks_html/css_WEB-ITnose</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11426.html" class="cxy-article-link">nodejs怎么运行html</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11425.html" class="cxy-article-link">HTML外部脚本怎么引入_HTML外部JavaScript脚本引入方法</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11424.html" class="cxy-article-link">请问这个iframe如何设置?_html/css_WEB-ITnose</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11423.html" class="cxy-article-link">怎么在HTML5中利用WebSocket实现基于实时新闻流的关键词地理分布图</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11528.html" class="cxy-article-link">css边框显示不出来怎么办</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11550.html" class="cxy-article-link">D3.js v6+ 动态数据工具提示实现教程：解决事件回调中的数据访问问题</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11552.html" class="cxy-article-link">html5使用device orientation检测设备方向 html5使用陀螺仪数据的方法</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11554.html" class="cxy-article-link">如何手动实现一个具备“全状态追溯”与“链式调用”的标准 Promise 引擎</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/11558.html" class="cxy-article-link">Vue开发经验总结：优化移动端应用的适配和性能</a>
                                <div class="cxy-article-meta">2026-09-22</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="cxy-sidebar cxy-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="cxy-widget">
        <h3 class="cxy-widget-title">推荐阅读</h3>
        <div class="cxy-recommend-grid">

    
            <a href="https://www.vqhf.com/article/11558.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="Vue开发经验总结：优化移动端应用的适配和性能">
                </div>
                <div class="cxy-recommend-title">Vue开发经验总结：优化移动端应用的适配和性能</div>
            </a>
    
            <a href="https://www.vqhf.com/article/11554.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="如何手动实现一个具备“全状态追溯”与“链式调用”的标准 Promise 引擎">
                </div>
                <div class="cxy-recommend-title">如何手动实现一个具备“全状态追溯”与“链式调用”的标准 Promise 引擎</div>
            </a>
    
            <a href="https://www.vqhf.com/article/11552.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="html5使用device orientation检测设备方向 html5使用陀螺仪数据的方法">
                </div>
                <div class="cxy-recommend-title">html5使用device orientation检测设备方向 html5使用陀螺仪数据的方法</div>
            </a>
    
            <a href="https://www.vqhf.com/article/11550.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="D3.js v6+ 动态数据工具提示实现教程：解决事件回调中的数据访问问题">
                </div>
                <div class="cxy-recommend-title">D3.js v6+ 动态数据工具提示实现教程：解决事件回调中的数据访问问题</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="cxy-widget">
        <h3 class="cxy-widget-title">最新文章</h3>
        <ul class="cxy-article-list">

    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/11558.html" class="cxy-article-link">Vue开发经验总结：优化移动端应用的适配和性能</a>
                <div class="cxy-article-meta">2026-09-22</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/11554.html" class="cxy-article-link">如何手动实现一个具备“全状态追溯”与“链式调用”的标准 Promise 引擎</a>
                <div class="cxy-article-meta">2026-09-22</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/11552.html" class="cxy-article-link">html5使用device orientation检测设备方向 html5使用陀螺仪数据的方法</a>
                <div class="cxy-article-meta">2026-09-22</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/11550.html" class="cxy-article-link">D3.js v6+ 动态数据工具提示实现教程：解决事件回调中的数据访问问题</a>
                <div class="cxy-article-meta">2026-09-22</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/11528.html" class="cxy-article-link">css边框显示不出来怎么办</a>
                <div class="cxy-article-meta">2026-09-22</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/11527.html" class="cxy-article-link">css选择器伪类:valid和:invalid表单校验样式不生效_通过属性匹配处理</a>
                <div class="cxy-article-meta">2026-09-22</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="cxy-widget">
        <h3 class="cxy-widget-title">热门标签</h3>
        <div class="cxy-article-tag-list">

    
            <a href="https://www.vqhf.com/tag/2547" class="cxy-article-tag-item">css选择器</a>
    
            <a href="https://www.vqhf.com/tag/1750" class="cxy-article-tag-item">css</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="cxy-footer">
        <div class="cxy-container">
            <div class="cxy-footer-links" style="justify-content: center;">
                
                
                <a href="https://www.vqhf.com/22.html" class="cxy-footer-link">免责声明</a>
                
                <a href="https://www.vqhf.com/23.html" class="cxy-footer-link">关于我们</a>
                
                <a href="https://www.vqhf.com/24.html" class="cxy-footer-link">联系我们</a>
                
                <a href="https://www.vqhf.com/25.html" class="cxy-footer-link">投诉删除</a>
                
                <a href="https://www.vqhf.com/26.html" class="cxy-footer-link">投稿须知</a>
                
                
            </div>
            <div class="cxy-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 趣航编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063733号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="cxy-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

    <!-- 公共脚本 -->
    <script src="https://www.vqhf.com/static/v0/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
<script>
(function() {
  var al = document.createElement("script");
  al.src = "/api/log?action=views&code=200&id=11527&path=http%3A%2F%2Fwww.vqhf.com%2Farticle%2F11527.html&type=archive&nonce="+Date.now();
  document.body.appendChild(al);
})();
</script>

</html>