• By interface style, we mean changing some user action style to improve the user experience.
    • Change the user’s mouse style (scroll bars are not explored because of poor compatibility)
    • Form outline, etc.
    • Prevent form field dragging

1. Mouse style cursor

Sets or retrieves what system-predefined cursor shape a mouse pointer moves over an object.

Attribute values describe
default The small white default
pointer Little hands
move mobile
text The text
not-allowed ban

Mouse on my body to view the effect oh:

<ul> <li style="cursor:default"> I am small </li> < Li style="cursor:pointer"> I am small </li> <li style="cursor:move"> I am small </li Style ="cursor:text"> </li> <li style="cursor:not-allowed"> </li> </ul>Copy the code

2. Outline outline

Is a line drawn around an element, around the edge of the border, to highlight the element.

 outline : outline-color ||outline-style || outline-width 
Copy the code

But we don’t care how many can be set, we usually remove.

The most direct way to write this is: 0; Or the outline: none;

<input type="text" style="outline: 0;" />Copy the code

3. Prevent dragging and dropping text field resize

In actual development, we can’t drag the lower right corner of the text field:

<textarea style="resize: none;" ></textarea>Copy the code

4. User interface style summary

attribute use use
The mouse style Change mouse style cursor There are many styles, but remember pointer
Contour line Form Default Outline The outline line is usually directly removed. The border is the border, which is often used
To prevent the drag and drop Mainly for text field resize Resize: None to prevent users from dragging and dropping text fields and causing page layout chaos