为什么设置的input:focus:invalid无效？

发布于
2020-06-28

chrome中运行：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
input:focus:invalid { /* 该样式不生效 */
    border:2px solid red;
}
</style>
</head>
<body>

<input type="email"/>

</body>
</html>

前端 html css

阅读 5.2k

3 个回答

得票最新

linong

29.2k1266132

发布于
2020-06-28

可以看一下focus下修改是不生效的。

我记得之前有个理论，那就是 爱恨原则，说的就是设置伪类的时候要注重一定的顺序。不知道是不是focus改border落在规则里面

http://jsrun.net/gUvKp/edit

抱歉_你想多了

8431828

发布于
2020-06-29

先捋捋样式
input = 输入框
:focus = 焦点元素
:invalid = 输入无效，或者说没有通过验证的元素

所以找一下验证规则的匹配吧，看看 required 和 pattern 写的对不对

qinchao888

99131833

发布于
2020-06-29

其实是生效的，被outline覆盖了，所以看上去像是没有生效，设置

input {
    outline: none;
}

就好了。。。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

为什么设置的input:focus:invalid无效？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

css布局怎么保证右边一直在可视范围内？