How to style CSS to lose focus

CSS loses focus

In web design, it is often necessary to add some styles to enhance the user interaction experience. CSS is a very powerful tool that allows us to achieve a variety of effects and animations. In CSS, there is a state called "focus state" (:focus), which indicates that the user is currently interacting with the element and the element is "focused". When you enter an element with the mouse or keyboard, the element gains focus, and when you leave the element, it loses focus. So, how to style CSS that loses focus?

1. Common lost focus styles

1. Border color

In the focus state, add a border to the element. When the element loses focus, make this border the same color as the element's background color, or make it lighter to indicate that the element has lost focus.

For example, we can add the following CSS style to the input element:

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

Here we use the outline and border properties of CSS to achieve this. When the input element is not focused, its border is gray; when the input element is focused, its border turns black.

It should be noted here that we use outline:none to cancel the dotted frame in the default focus state, otherwise it will cause visual interference.

2. Background color

When the element gains focus, set a background color for it; when the element loses focus, restore the background color to its original color.

For example, when the user enters content in the input box, the background color of the input box can be changed; when the user submits the form, the background color of the input box can be restored.

input:focus {
    background-color: #fff;
}

input {
    background-color: #f6f6f6;
}

3. Font color

When the element gains focus, set a different color for its text; when the element loses focus, restore the text color to its original color.

For example, we can add the following CSS style to the input element:

input:focus {
    color: #333;
}

input {
    color: #666;
}

When the input element is focused, its text color will change to black; when the input element loses focus, the text The color will change back to its original gray.

2. Use pseudo-classes to implement out-of-focus styles

Some common out-of-focus styles are mentioned above. In fact, these styles are all implemented through CSS pseudo-classes. CSS pseudo-classes refer to a special set of selectors that do not select the element itself, but select certain states of the element. For example, we can use the :focus selector to style the focus state of an element and the :hover selector to style the hover state of an element.

Since pseudo-classes can set different styles for different states of an element, they are very suitable for implementing lost focus styles. The following are some common pseudo-classes and their usage:

1. :focus

This pseudo-class selector is used to select the currently focused element. When the user clicks or presses the Tab key to enter an element, the element will be in focus, thus triggering the :focus style.

For example, we can add the following CSS style to the input element:

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

2, :active

This pseudo-class selector is used to select the currently clicked element. When the user clicks on an element with the mouse, the element becomes active, triggering the :active style.

For example, we can add the following CSS style to the button:

button:active {
    background-color: #f00;
}

button {
    background-color: #ccc;
}

When the user clicks the button, the background color of the button will turn red.

3.:visited

This pseudo-class selector is used to select elements of visited links. When the user clicks on a link, the link will become visited, thus triggering the :visited style.

For example, we can add the following CSS style to the visited link:

a:visited {
    color: #999;
}

When the user visits this link, the color of the link will turn gray.

3. Summary

The focus state of CSS is a very useful state and is often used in web design. Adding focus state styles to elements can make users more intuitively aware of which elements they are currently interacting with, thus improving the interaction experience. Whether it is border color, background color or text color, the design of losing focus style can be achieved through CSS pseudo-class selector. Mastering these skills, I believe you can make your web design even better.

The above is the detailed content of How to style CSS to lose focus. For more information, please follow other related articles on the PHP Chinese website!