How to make css input box non-editable

How to set the css input box to be uneditable: 1. Add the disabled attribute to the input tag; 2. Add the readonly attribute to the input tag; 3. Add "readonly unselectable="on"" to the input tag.

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

3 ways to make the input input box uneditable

1. Add the disabled attribute to the input tag

The disabled attribute specifies that the input element should be disabled, and the disabled input element, It cannot be edited, copied, selected, cannot receive focus, and the passed 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">

3. Add readonly unselectable="on"

readonly unselectable="on" to the input tag. This attribute is similar to disable. The input element cannot be edited. , cannot be copied, cannot be selected, cannot receive focus, and the color of the text will also turn gray after setting, but the value can be received in the background.

Example:

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

[Recommended learning: css video tutorial]

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