CSS实现禁⽤状态，样式设置以及不可点击事件的⾏为
今天怂怂就为⼤家分享⼀篇通过css禁⽤状态，样式设置以及不可点击样式事件的实例讲解，具有很好的参考价值，希望对⼤家有所帮助。⼀起跟随怂怂过来看看吧
⼀：为input框添加禁⽤状态
1、readonly表⽰此域的值不可修改，仅可与 type="text" 配合使⽤，可复制，可选择，可以接收焦点，后台能接收到传值.
代码演⽰：
<input type="text" name="firstname" value=""  readonly="readonly" />
2、disabled表⽰禁⽤input元素，不可编辑，不可复制，不可选择，不能接收焦点,，后台不能接收到传值.
代码演⽰：
　<input type="text" name="firstname" value="" disabled="disabled" />
⼆：为禁⽤状态添加状态
⿏标不可点击主要是两种表现：
1.⿏标不可点击时的显⽰状态：cursor: not-allowed
样式演⽰：
<style>
input[readonly]  //readonly：后台能接收此input框传值
{
background:#dddddd; //为带有readonly的input框添加背景颜⾊
cursor: not-allowed  // 表⽰⼀个红⾊的圈加⼀个斜杠
css鼠标点击样式}
</style>
2.⿏标原有的事件不能实现:pointer-events:none
样式演⽰：
<style>
input[disabled] //disadled：后台不可接收此input传值
{
background:#dddddd; //为带有disabled的input框添加背景颜⾊
pointer-events:none;//⿏标点击不可修改
}
</style>
--------------------------------拓展---------------------------------
cursor定义和⽤法
cursor 属性规定要显⽰的光标的类型（形状）。
该属性定义了⿏标指针放在⼀个元素边界范围内时所⽤的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。
默认值：auto
继承性：yes
版本：CSS2
JavaScript 语法：object.style.cursor="crosshair"可能的值
值描述
url 需使⽤的⾃定义光标的 URL。
注释：请在此列表的末端始终定义⼀种普通的光标，以防没有由 URL 定义的可⽤光标。
default默认光标（通常是⼀个箭头）
auto默认。浏览器设置的光标。
crosshair光标呈现为⼗字线。
pointer光标呈现为指⽰链接的指针（⼀只⼿）
move此光标指⽰某对象可被移动。
e-resize此光标指⽰矩形框的边缘可被向右（东）移动。
ne-resize此光标指⽰矩形框的边缘可被向上及向右移动（北/东）。
nw-resize此光标指⽰矩形框的边缘可被向上及向左移动（北/西）。
n-resize此光标指⽰矩形框的边缘可被向上（北）移动。
se-resize此光标指⽰矩形框的边缘可被向下及向右移动（南/东）。
sw-resize此光标指⽰矩形框的边缘可被向下及向左移动（南/西）。
s-resize此光标指⽰矩形框的边缘可被向下移动（南）。
w-resize此光标指⽰矩形框的边缘可被向左移动（西）。
text此光标指⽰⽂本。
wait此光标指⽰程序正忙（通常是⼀只表或沙漏）。
help此光标指⽰可⽤的帮助（通常是⼀个问号或⼀个⽓球）。
❤如果⽂章对您有所帮助，就在⽂章的右上⾓或者⽂章的末尾点个赞吧！(づ￣ 3￣)づ
❤如果喜欢⼤⽩兔分享的⽂章，就给⼤⽩兔点个关注吧！(′ᴗ‵)づ╭❤～
❤对⽂章有任何问题欢迎⼩伙伴们下⽅留⾔或者⼊探讨【号：708072830】
❤鉴于个⼈经验有限，所有观点及技术研点，如有异议，请直接回复讨论(请勿发表攻击⾔论)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。