本文摘自PHP中文网,作者藏色散人,侵删。
css实现禁止点击的方法:1、通过设置“disabled”为input框添加禁用状态;2、通过设置“cursor:not-allowed”为禁用状态添加状态;3、设置“pointer-events:none”即可。
本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑
CSS实现禁用状态,样式设置以及不可点击事件的行为
今天为大家分享一篇通过css禁用状态,样式设置以及不可点击样式事件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随怂怂过来看看吧
一:为input框添加禁用状态
1、readonly表示此域的值不可修改,仅可与 type="text" 配合使用,可复制,可选择,可以接收焦点,后台能接收到传值.
代码演示:
1 |
|
2、disabled表示禁用input元素,不可编辑,不可复制,不可选择,不能接收焦点,,后台不能接收到传值.
代码演示:
1 |
|
二:为禁用状态添加状态
鼠标不可点击主要是两种表现:
1.鼠标不可点击时的显示状态:cursor: not-allowed
样式演示:
1 2 3 4 5 6 7 |
|
2.鼠标原有的事件不能实现:pointer-events:none
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者