css :disabled控制禁用元素样式技巧

css伪类:disabled和enabled表单控制

嘿，你说 CSS 伪类：disabled 和：enabled 真的很有趣。
上周一位客户问我为什么表单按钮有点奇怪。
后来我发现他没有正确使用这两个伪类。

看吧，:disabled伪类主要用于不能点击的按钮和输入字段。
示例：输入：禁用{背景颜色：f2 f2 f2 ;颜色：9 9 9 ;光标：不允许;}。
这样设置后，按钮会变成灰色，文字会被隐藏，光标仍然是禁止标志。
2 02 3 年，当我在上海开发一个应用程序项目时，我注意到用户经常点击错误的禁用按钮。
使用这个伪类后，问题明显减少了。
当然，可以使用所有表单元素，例如输入、文本区域、选择和按钮。

:enabled 伪类以相反的方式工作并匹配所有可点击元素。
我曾经在杭州创建过一个注册表。
提交按钮从一开始就被禁用，用户在不阅读条款和条件的情况下无法单击它。
用户完成验证后，我使用 JavaScript 来删除选择退出。
此时，会自动出现 :enabled 样式，例如例如。
button:enabled{background-color:007 bff;cursor:pointer;}，按钮立即变成蓝色并且可以点击。
这种动态效果对于用户来说特别直观。

最令人兴奋的事情是什么？不需要添加额外的类控件，样式和状态直接链接，代码也干净很多。
兼容性也很好，现在大多数浏览器都支持。
已经有一个旧项目了。
我忘了它是2 02 2 年创建的。
我用特别老的浏览器测试了一下，发现样式完全乱了。
最后只好硬着头皮加了很多条件判断。

总的来说，这两个伪类可以极大地提高表单的可读性和交互体验。
想想看：用户一眼就能看出什么可以点击，什么不可以点击，可以减少多少误操作。
另外，开发也很容易。
无需手动更改类。
当状态改变时样式会自动改变，这是非常令人担忧的。

但是，如果您犯了错误，例如例如，如果使用“:enabled”作为禁用状态，用户可能会感到困惑。
无论如何，我认为如果这两个伪类用得好，表单设计肯定会变得更加直观和人性化。

CSS :valid和:invalid伪类：表单验证样式反馈