Lesson 34-CSS3 User Interface

appearance

The appearance property controls whether an element adopts the default styles (appearance) of the user agent (browser)

element {
    appearance: auto | none;
}

element {
    appearance: auto | none;
}

• auto (default): The element adopts the default styles provided by the browser.
• none: The element does not adopt any default styles and appears as a “naked” element, usually a simple box with no specific styles.

input[type="range"] {
    appearance: none; /* Removes the default styles of the slider control */
}

input[type="range"] {
    appearance: none; /* Removes the default styles of the slider control */
}

resize

The resize property determines whether an element can be resized by the user, and is usually used for editable areas with multiple lines of text (such as <textarea>).

element {
    resize: none | both | horizontal | vertical;
}

element {
    resize: none | both | horizontal | vertical;
}

• none (default): The element is not resizable.
• both: The element can be resized in both horizontal and vertical directions.
• horizontal: The element can only be resized horizontally.
• vertical: The element can only be resized vertically.

cursor

The cursor property specifies the type of cursor that should be displayed when the mouse pointer is over an element. Its value can be a predefined cursor shape keyword, a URL to a system cursor file, or auto (default) to let the browser automatically determine the appropriate cursor. Some common keywords are as follows:

• auto
• default
• pointer (hand shape, usually used for links)
• move
• text
• wait
• help
• not-allowed
• zoom-in / zoom-out
• grab / grabbing (grabbing / dragging effect)

nav-index, nav-up, nav-right, nav-down, nav-left

Navigation-related attributes help define the order and direction of keyboard navigation, but they are not commonly used in actual applications and there are browser compatibility issues, so they are not commonly used.

pointer-events

The pointer-events property controls whether an element responds to mouse events (such as clicks, hovers, etc.)

element {
    pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible |
    painted | fill | stroke | all;
}

element {
    pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible |
    painted | fill | stroke | all;
}

• auto (default): The element responds to mouse events.
• none: The element does not respond to mouse events, and mouse events will pass through the element to the elements below it.
• Other values ​​(such as visiblePainted, fill, etc.) apply to SVG elements and are not described in detail here.

.overlay {
    pointer-events: none; /* The overlay layer does not respond to mouse events, and clicks will penetrate to the elements below it */
}

.overlay {
    pointer-events: none; /* The overlay layer does not respond to mouse events, and clicks will penetrate to the elements below it */
}