How to set the input box to be non-editable in css

How to set the input box to be non-editable in css: first create an HTML sample file; then define an input tag; then add the css style "pointer-events: none;" to the input.

The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

css makes input uneditable

Add css style pointer-events: none; to the input

input{
    pointer-events: none;
}

Use pointer-events to prevent An element being the target of a mouse event does not necessarily mean that the event listener on the element will never fire. If an element descendant explicitly specifies the pointer-events attribute and allows it to be the target of mouse events, then any events pointed to that element will propagate through the parent element during event propagation and trigger the event listeners on it in the appropriate manner. . Of course, mouse activity on the screen that is on the parent element but not on the descendant element will not be captured by the parent element and descendant elements (will pass through the parent element and point to the element located below it).

Make input uneditable in HTML

1. Add the disabled attribute to the input tag

The disabled attribute stipulates that the input element should be disabled. The disabled input element cannot be edited or disabled. Copy, cannot be selected, cannot receive focus, and the value will not be received in the background. After setting, the color of the text will turn gray. The disabled attribute cannot be used with .

Example:

<input type="text" disabled="disabled" />

2. Add the readonly attribute to the input tag

The readonly attribute specifies that the input field is read-only and copyable. However, the user can use the Tab key to switch to the A field is selectable, can receive focus, and its text can be selected or copied. The passed value will be received in the background. The readonly attribute prevents users from modifying the value.

The readonly attribute can be used with or .

Example:

<input type="text" readonly="readonly">

Recommended: "css video tutorial"

The above is the detailed content of How to set the input box to be non-editable in css. For more information, please follow other related articles on the PHP Chinese website!