Css method to prevent clicks: 1. Add a disabled state to the input box by setting "disabled"; 2. Add a disabled state to the disabled state by setting "cursor:not-allowed"; 3. Set "pointer- events:none" is enough.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

CSS implements disabled state, style setting and non-clickable event behavior

Today I will share with you an example of how to use css disabled status, style settings and non-clickable style events. It has a good reference value and I hope it will be helpful to everyone. Let’s follow along and take a look.

1: Add a disabled state to the input box

1, readonlyIndicates that the value of this field cannot be modified and can only be used with type="text". It can be copied, selected, and can receive focus. The background can receive the passed value.
Code demonstration:

<input type="text" name="firstname" value=""  readonly="readonly" />

2, disabled means that the input element is disabled, cannot be edited, cannot be copied, cannot be selected, and cannot receive focus,, The background cannot receive the passed value.
Code demonstration:

　<input type="text" name="firstname" value="" disabled="disabled" />

2: Add status to disabled status

Mouse is not available There are two main manifestations of clicking:

1. The display state when the mouse is not clickable: cursor: not-allowed

Style demonstration:

<style> 
    input[readonly]   //readonly:后台能接收此input框传值
    {
         background:#dddddd; //为带有readonly的input框添加背景颜色
         cursor: not-allowed  // 表示一个红色的圈加一个斜杠
    }
</style>

2. The original mouse Events cannot be implemented: pointer-events:none

Style demo:

<style> 
    input[disabled] //disadled:后台不可接收此input传值
    {
         background:#dddddd; //为带有disabled的input框添加背景颜色
         pointer-events:none;//鼠标点击不可修改
    }
</style>

--------------------- ----------expand---------------------------------

cursor Definition and Usage

The cursor attribute specifies the type (shape) of the cursor to be displayed. [Recommended study: "css video tutorial"]

This attribute defines the cursor shape used when the mouse pointer is placed within the boundary of an element (however, CSS2.1 does not define which boundary determine this range).

The above is the detailed content of How to disable clicks in css. For more information, please follow other related articles on the PHP Chinese website!