How to disable clicks in css

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).

##Inheritance: yesVersion: CSS2JavaScript Syntax:

Default:	auto
	object.style.cursor ="crosshair"

Possible values

##ValueurlThe URL of the custom cursor to be used. defaultautocrosshairpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp

Description
	Note: Always define a normal cursor at the end of this list in case there is no available cursor defined by URL.
Default cursor (usually an arrow)
Default . The cursor set by the browser.
The cursor is rendered as crosshairs.
The cursor is rendered as a pointer (a hand) indicating the link
This cursor indicates that an object can be moved.
This cursor indicates that the edge of the rectangular box can be moved to the right (east).
This cursor indicates that the edge of the rectangle can be moved up and to the right (North/East).
This cursor indicates that the edge of the rectangle can be moved up and to the left (North/West).
This cursor indicates that the edge of the rectangular box can be moved up (north).
This cursor indicates that the edge of the rectangle can be moved down and to the right (south/east).
This cursor indicates that the edge of the rectangle can be moved down and to the left (south/west).
This cursor indicates that the edge of the rectangular box can be moved down (south).
This cursor indicates that the edge of the rectangular box can be moved to the left (west).
This cursor indicates text.
This cursor indicates that the program is busy (usually a watch or hourglass).
This cursor indicates available help (usually a question mark or a balloon).

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!