首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么默认使用input:invalid而不是main输入样式?

默认使用input:invalid而不是main输入样式的原因是因为input:invalid是一个伪类选择器,用于选择表单中的无效输入。当用户输入不符合输入字段的规则时,该字段将被标记为无效。通过使用input:invalid选择器,可以轻松地为无效的输入字段应用样式,以提醒用户输入错误。

相比之下,main是HTML5中的一个语义化标签,用于表示文档的主要内容。它并不是一个与输入相关的选择器,因此无法直接用于选择和样式化输入字段。

总结起来,使用input:invalid而不是main输入样式的原因是因为它是专门用于选择和样式化无效输入字段的选择器,而main标签并不适用于这个目的。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

对HTML-input的一些思考和理解

这两个问题也造就了这篇文章: ---- 先说下input中的一些问题: 不是所有的 input 都支持“placeholder”,比如:type="date" 。...但这也会带来一些效果:input 将背景“自动”变为黄色。哦,这可不是什么bug。是 input 对 paste 的响应样式罢了。...★这里“比较推荐”是“在解决问题的办法”中比较得。事实上,还是推荐用原生的“取消按钮”。 ” 哦对了,既然有了maxlength,为什么W3C还保留了max?...;} input:invalid ~label::after{content: '你输入邮箱错误';} input:valid{border: 1px solid green;} input:invalid...阻止自带默认气泡: function stopBubble(form){ form.addEventListener("invalid",function(e){ e.preventDefault

66230

HTML 表单和约束验证的完整指南

HTML5 输入字段 HTML 提供: 用于多行文本框 用于选项的下拉列表 用于……按钮 但你最常使用的是: <input type...最好显示标签不是强迫用户记住该字段想要什么! 输入行为 字段类型和约束属性会改变浏览器的输入行为。例如,number输入显示移动设备上的数字键盘。...您可以placeholder使用::placeholder伪元素设置输入文本的样式: /* blue placeholder on email fields */ input[type="email...考虑这个例子: input:invalid { color: red; } input:enabled { color: black; } 无效输入具有红色文本,但它仅适用于具有disabled属性的输入...你可以: 停止验证,直到用户与字段交互或提交表单 使用自定义样式显示错误消息 提供仅在 HTML 中无法实现的自定义验证。

8.3K40
  • AngularDart4.0 指南- 表单 顶

    顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面中的输入和输出属性)来绑定到父组件。 这不是现在的问题,这些未来的变化不会影响表单。...一起,这些给表单了一些样式。 Angular可不使用Bootstrap类或任何外部库的样式。 Angular的应用程序可以使用任何CSS库或不使用。...样式控件 有效的控制属性是最有趣的,因为当一个控制值无效时,你想发送一个强烈的视觉信号。 要创建这样的视觉反馈,您将使用Bootstrap自定义表单类 is-valid和is-invalid。...临时将另一个名为spy的模板引用变量添加到Name 标记,并使用它显示输入的CSS类。...is-invalid类替换为is-valid。 删除#spy模板引用变量和使用它的诊断。 作为类绑定的替代方法,可以使用NgClass指令来设置控件的样式

    17.5K30

    用神奇的 form 验证 API 来优化你的表单验证

    此属性关联伪类 :valid / :invalid 。 typeMismatch(只读) true / false 当表单元素输入的值与类型不匹配时为 true ,否则为 false 。...此属性关联伪类 :valid / :invalid 。 tooLong(只读) true / false 当表单元素输入的值长度超过 maxlength 属性时 为 true ,否则为 false 。...validationMessage 当表单元素验证正确时则返回 '',否则则返回默认或者经由setCustomValidity() 方法设置的错误信息。 效果如下: ?...input.checkValidity(); }); input.addEventListener('invalid', event => { const {...点击「阅读原文」也可以看哦~ 鱼头注:Mmmmm,功能倒是挺好的,如果不是原生的组件样式太丑,不同浏览器的表现不一致,而且样式还不能修改,我想用原生 API 开发的人应该会很多。。。

    1.1K20

    CSS Selectors Level 4新特性全面解析

    在 CSS3 中已经有 :not(),不过在 CSS3 中只能使用简单的匹配规则,例如 :not(p) 用来选择不是 的元素。...值得注意的是,规范中写道如果使用的时间轴并不是文档语言所规定的,那么 :past() 和 :future() 有可能分别匹配 :current() 元素的前面的兄弟元素和后面的兄弟元素。...> The validity pseudo-classes——:valid, :invalid 在 中,如果我们输入了 abc123,那么此时 :invalid...这里要注意假如我们没有为 作约束,例如,那么它的任意输入将使元素既不会被 :valid 匹配,也不会被 :invalid 匹配。...在很多时候,我们需要对“脏值”做一个高亮的显示,以前可能需要配合 JS 对值的边界进行检测,然后在对元素的样式进行修改。现在,有了这两个伪类的存在,我们可以完全使用 CSS 来控制。

    2K70

    Asp.NetCore Web开发之输入验证

    所以进行数据有效性验证是必要的,我们一般通过js或者使用HTML标签自带的属性进行有效性限制,但在不断的演化中,也出现了一些很优秀的数据验证框架,使用它们能高效的开发,最常用的就是基于Jquery的jquery.validate.js...errorClass: 'invalid-feedback', //设置验证用的规则 rules: { 此处填写要验证的input...其他的代码用于设置样式等信息,初学者可忽略。...以上就是该框架的大体用法,但解释此用法不是本节的主要目的,我们了解了它的用法后,接下来介绍一个更简单的用法:asp.net core的输入验证,为了简化表单验证的代码量,asp.net core 从后端出发...,这也是为什么叫自身验证,可以直接遍历返回值,MemberNames就是参数二,ErrorMessage就是参数一,在Age输入输入24,控制台打印如下: 源码文件位于: https:/

    2K30

    CSS3伪类:valid和:invalid实现表单校验

    1、:valid 用于匹配输入值为合法的元素 2、:invalid 用于匹配输入值为非法的元素 3、required 属性规定必需在提交之前填写输入字段 4、pattern 属性规定用于验证输入字段的正则表达式...:valid/:invalid 选择器用于在表单元素中的值是合法/非法时设置指定样式。...注意: :valid/:invalid 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性,及正确的 email 字段, 合法的数字字段等。...{ border-color: green; box-shadow: inset 5px 0 0 green; } // input内容非法,边框颜色是红色 input:invalid {...> 提交 这时候点击提交,就好自动校验了,而且HTML5会直接添加Tips提示用户,请看下列示例(虽然样式不是很美观

    1.1K20

    CSS 基础系列:伪类和伪元素

    2.伪类和伪元素的概念 2.1 伪类: 伪类用于当已有元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为动态变化的。...在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式进入另一状态后,该样式就会失去。状态伪类的顺序很重要,顺序错误可能会导致没有效果。...:out-of-range input:out-of-range 选择不在指定区域内的表单元素 :valid input:valid 选择条件验证正确的表单元素 :invalid input:invalid...该伪元素不是 CSS 的标准,它的实现可能在将来会有所改变,所以要决定使用时必须谨慎。...伪类和伪元素-3.png p:first-child: 匹配到的是p元素,因为p元素是div的第一个子元素; h1:first-child: 匹配不到任何元素,因为在这里h1是div的第二个子元素,不是第一个

    1.9K10

    使用 Vanilla JavaScript 框架创建一个简单的天气应用

    提示信息文本默认是没内容的,只有在特定的条件下才能显示,比如城市名称不正确或者重复输入已查询过的城市信息。...第二个 section 区域用来展示已查询过的城市列表,默认的情况,这个区域是没有查询信息的,只有输入城市信息,成功调用天气API接口时,才能显示相关信息。...五、添加基础的样式 创建完基本的结构后,我们需要用 CSS 进行美化,如下代码所示我们定义了全局的颜色自定义变量,以及一些基础的样式外观,示例代码如下: :root { --bg_main: #0a1f44...1、当按钮提交时 当用户点击按钮或者按回车键时,我们的程序应该这么做: 阻止提交按钮的默认行为,防止刷新页面。 获取输入输入的城市信息。...接下来,我们需要判断用不是输入了逗号分隔用于城市+国家的形式进行精准搜索,通过 data-name 属性进行判断是否有重复的城市。

    1.6K30

    使用 Vanilla JavaScript 框架创建一个简单的天气应用

    提示信息文本默认是没内容的,只有在特定的条件下才能显示,比如城市名称不正确或者重复输入已查询过的城市信息。...第二个 section 区域用来展示已查询过的城市列表,默认的情况,这个区域是没有查询信息的,只有输入城市信息,成功调用天气API接口时,才能显示相关信息。...五、添加基础的样式 创建完基本的结构后,我们需要用 CSS 进行美化,如下代码所示我们定义了全局的颜色自定义变量,以及一些基础的样式外观,示例代码如下: :root { --bg_main: #0a1f44...1、当按钮提交时 当用户点击按钮或者按回车键时,我们的程序应该这么做: 阻止提交按钮的默认行为,防止刷新页面。 获取输入输入的城市信息。...接下来,我们需要判断用不是输入了逗号分隔用于城市+国家的形式进行精准搜索,通过 data-name 属性进行判断是否有重复的城市。

    1.6K20

    (转载)Java8新的日期API LocalDate, LocalTime

    为什么我们需要新的Java日期/时间API? 在开始研究Java 8日期/时间API之前,让我们先来看一下为什么我们需要这样一个新的API。...所有的日期类都是可变的,因此他们都不是线程安全的,这是Java日期类最大的问题之一。...举个例子,要拿到当前实例我们可以使用now()方法,在所有的类中都定义了format()和parse()方法,不是像以前那样专门有一个独立的类。...java.time.LocalDate:LocalDate是一个不可变的类,它表示默认格式(yyyy-MM-dd)的日期,我们可以使用now()方法得到当前时间,也可以提供输入年份、月份和日期的输入参数来创建一个...像LocalDate一样,该类也提供了时区支持,同时也可以传入小时、分钟和秒等输入参数创建实例,我们来看一个简单的程序,演示该类的使用方法。

    82930

    【工程化】深入浅出 CSS Modules

    所有的类名和动画名称默认都有各自的作用域的 CSS 文件。...CSS Modules 并不是 CSS 官方的标准,也不是浏览器的特性,而是使用一些构建工具,比如 webpack,对 CSS 类名和选择器限定作用域的一种方式(类似命名空间) 本文来介绍一下 CSS...modules 中定义的类名必须得通过类似设置变量的方式给 HTML 设置(如上示例所示) 那么我能像其他的 CSS 文件一样直接使用类名(也就是普通的设置方法),不是编译后的哈希字符串么?...CSS Modules 给开发者留的一个后门,我们这样的 CSS,还是直接放在普通 .css 文件中比较好,我理解这就是 React 为什么对待 .css 和 .module.css 不同后缀进行不同的处理的原因...CSS 官方的标准,也不是浏览器的特性,而是使用一些构建工具,比如 webpack,对 CSS 类名和选择器限定作用域的一种方式(类似命名空间)。

    85920

    【工程化】深入浅出 CSS Modules

    所有的类名和动画名称默认都有各自的作用域的 CSS 文件。...CSS Modules 并不是 CSS 官方的标准,也不是浏览器的特性,而是使用一些构建工具,比如 webpack,对 CSS 类名和选择器限定作用域的一种方式(类似命名空间) 本文来介绍一下 CSS...modules 中定义的类名必须得通过类似设置变量的方式给 HTML 设置(如上示例所示) 那么我能像其他的 CSS 文件一样直接使用类名(也就是普通的设置方法),不是编译后的哈希字符串么?...CSS Modules 给开发者留的一个后门,我们这样的 CSS,还是直接放在普通 .css 文件中比较好,我理解这就是 React 为什么对待 .css 和 .module.css 不同后缀进行不同的处理的原因...CSS 官方的标准,也不是浏览器的特性,而是使用一些构建工具,比如 webpack,对 CSS 类名和选择器限定作用域的一种方式(类似命名空间)。

    88910
    领券