Record a CSS black technology attribute --pointer-events

Recently, at work, I encountered a form field that needs to be read-only, but it can also be submitted. Before, read-only was disabled. After adding this attribute, the form field cannot be submitted.

Later, I found out that it can be replaced with readOnly, but readOnly only supports input, and select does not, so I have to think of other ways.

Then I discovered the pointer-events attribute in CSS, which is simply a black technology.

The following is an introduction to pointer-events

CSS pointer-events Property

example

Sets whether an element reacts to pointer events:

div.ex1 {
  pointer-events: none;
}

div.ex2 {
  pointer-events: auto;
}

CSS syntax

pointer-events: auto|none;

attribute value

attribute value	describe
auto	Defaults. Elements react to pointer events such as :hover and click.
none	Elements do not react to pointer events.
initial	Set this property to its default value. See  initial .
you inherit	Inherit this property from its parent element. See  inherit .

Therefore, when we implement the above scenario, we can assign a class to the field that needs to be read-only, and then use this CSS property to control the read-only effect. We only need to add an additional read-only background color.

As follows:

.readOnly select {pointer-events: none;background:#f7f7f7;}