Home > Article > Web Front-end > 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, 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" />
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>
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).
Default: | auto |
---|---|
yes | |
CSS2 | |
object.style.cursor ="crosshair" |
Description | |
---|---|
The URL of the custom cursor to be used. |
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!