输入:无效的CSS规则应用于页面加载

鲍勃

在Firefox或Chrome中查看这两个小提琴。这一本书中,我只有一个带有required属性和submit按钮的简单表单框为空时按“提交”将其样式设置为invalid(在Firefox中为红色轮廓)。但是它一直等到您按提交以表明它无效。

现在尝试这个相同,除了有一些CSS:

input:invalid{
    border-color:orange
}

除非这次是按下提交之前应用橙色边框颜色因此,当且仅当您手动invalid为表单设置样式时,浏览器才在之前应用它,这不是直观行为。当然,在您输入任何内容之前,必填字段将无效。

有没有办法来解决这个问题?

凯西法则

这是您要寻找的内容:http : //jsfiddle.net/CaseyRule/16fuhf6r/2/

样式如下:

form.submitted input:invalid{
    border-color:orange
}

然后添加这个js:

$('input[type="submit"]').click( function(){
    $('form').addClass('submitted');
});

我不相信没有javascript可以实现这一目标。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在 Heroku 部署后,Bootstrap css 规则应用于自定义规则?

来自分类Dev

将单个Makefile目标规则应用于多个输入文件

来自分类Dev

CSS选择器将规则应用于相似元素的多个类

来自分类Dev

是否将CSS规则应用于内部的所有元素?

来自分类Dev

将CSS规则应用于除一个标签之外的所有内容

来自分类Dev

将CSS规则应用于子类中的多个元素

来自分类Dev

将CSS规则应用于不同的浏览器特定选择器

来自分类Dev

将CSS规则应用于一个工具提示?

来自分类Dev

仅在子元素创建后如何将规则应用于子元素(CSS)?

来自分类Dev

如何将CSS规则应用于其中包含特定关键字的类?

来自分类Dev

如何停止将CSS规则应用于特定元素

来自分类Dev

将分组规则应用于时间序列?

来自分类Dev

将规则应用于条件格式

来自分类Dev

将JavaScript规则应用于克隆的元素

来自分类Dev

jQuery Validator规则应用于错误的元素

来自分类Dev

样式规则应用于错误的元素

来自分类Dev

将分组规则应用于时间序列?

来自分类Dev

使用*匹配将规则应用于多个类

来自分类Dev

Make - 将规则应用于动态创建的文件

来自分类Dev

将 VBA 相同的规则应用于多行

来自分类Dev

将CSS规则应用于具有特定类别但最后一个类别的所有元素

来自分类Dev

CakePHP 3.x:将应用程序规则应用于多个实体

来自分类Dev

导出Excel(xls或xlsx或CSV)工作表,并将验证/规则应用于列

来自分类Dev

如何在phoenix框架中将自定义验证规则应用于模型

来自分类Dev

jQuery选择器:未单击某些子项时将规则应用于元素

来自分类Dev

是否有一个JavaScript框架可将规则应用于表单的动态更改?

来自分类Dev

如何基于单元格值将格式设置规则应用于整行

来自分类Dev

Office365用户如何将保留标记规则应用于其邮箱?

来自分类Dev

如何将规则应用于以特定单词开头的所有类?

Related 相关文章

  1. 1

    在 Heroku 部署后,Bootstrap css 规则应用于自定义规则?

  2. 2

    将单个Makefile目标规则应用于多个输入文件

  3. 3

    CSS选择器将规则应用于相似元素的多个类

  4. 4

    是否将CSS规则应用于内部的所有元素?

  5. 5

    将CSS规则应用于除一个标签之外的所有内容

  6. 6

    将CSS规则应用于子类中的多个元素

  7. 7

    将CSS规则应用于不同的浏览器特定选择器

  8. 8

    将CSS规则应用于一个工具提示?

  9. 9

    仅在子元素创建后如何将规则应用于子元素(CSS)?

  10. 10

    如何将CSS规则应用于其中包含特定关键字的类?

  11. 11

    如何停止将CSS规则应用于特定元素

  12. 12

    将分组规则应用于时间序列?

  13. 13

    将规则应用于条件格式

  14. 14

    将JavaScript规则应用于克隆的元素

  15. 15

    jQuery Validator规则应用于错误的元素

  16. 16

    样式规则应用于错误的元素

  17. 17

    将分组规则应用于时间序列?

  18. 18

    使用*匹配将规则应用于多个类

  19. 19

    Make - 将规则应用于动态创建的文件

  20. 20

    将 VBA 相同的规则应用于多行

  21. 21

    将CSS规则应用于具有特定类别但最后一个类别的所有元素

  22. 22

    CakePHP 3.x:将应用程序规则应用于多个实体

  23. 23

    导出Excel(xls或xlsx或CSV)工作表,并将验证/规则应用于列

  24. 24

    如何在phoenix框架中将自定义验证规则应用于模型

  25. 25

    jQuery选择器:未单击某些子项时将规则应用于元素

  26. 26

    是否有一个JavaScript框架可将规则应用于表单的动态更改?

  27. 27

    如何基于单元格值将格式设置规则应用于整行

  28. 28

    Office365用户如何将保留标记规则应用于其邮箱?

  29. 29

    如何将规则应用于以特定单词开头的所有类?

热门标签

归档