One: Add disabled status to the Input box

1. Readonly Indicates that the value of this field cannot be modified and can only be used with type=”text”. This field can be copied, selected, and can receive focus. Code demo:

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

2. Disabled Disables input elements, which cannot be edited, copied, selected, receive focus, or receive values in the background. Code demo:

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

Two: Add a state to a disabled state

The mouse is not clickable mainly in two ways:

1. The cursor is displayed when the mouse is not allowed to be clicked: CURSOR: not-allowed

Style demo:

<style> input[readonly] {background:# DDDDDD; Cursor: not-allowed // Indicates a red circle with a slash} </style>Copy the code

2. The pointer-events:none cannot be implemented

Style demo:

<style> input[disabled] //disadled: // Add the background color pointer-events:none for the input box with disabled; } </style>Copy the code

Definition and usage of cursor

The cursor property specifies the type (shape) of the cursor to display.

This property defines the shape of the cursor to use when the mouse pointer is placed within the bounds of an element (although CSS2.1 does not define which bounds determine the bounds).

The possible values

Ps: Cursor usage tutorial fromwww.w3school.com.cn/cssref/pr_c…

If an article has been helpful, give it a “like” in the upper right corner or at the bottom of the article. (the better we understand you, the better we understand you

If you like this post shared by the big White rabbit, please click on it! (๑ ‘ᴗ ‵ ๑) づ ╭ ❤ ~

If you have any questions about this article, please leave a comment below or join the group.

In view of the limited personal experience, all views and technical research points, if you have any objection, please directly reply to the discussion (do not make offensive remarks)