How can I implement hover interaction by using CSS to control the input box input style?

When creating a form, we often want to have the interaction effect of hovering over the mouse. There are several ways to achieve this:
1. Writing onmouseover and onmouseout scripts in xhtml can be achieved, but this violates the principle of separation of content and presentation advocated by web standards. In the future, it will be complicated to modify this information. Writing xhtml directly will also increase the page code. It may not matter if it is only an input box. If it is dozens or hundreds, the number of bytes will be greatly increased.

2. Add a small script to xhtml. You can switch the CSS when the cursor passes. For more information, see this article. Although the content and performance are separated, it will be very convenient for future modifications. But it also increases the page code.
Is there a better way to achieve the interaction effect of hovering over the input style of the input box?
We will discuss this method today to directly write a small script for the interaction effect of hovering in the CSS file. This not only separates content from performance, but also reduces xhtml code, facilitating code reuse and optimization.
The principle of this method is mainly to apply the expression of CSS. For more information about expression, see this article. Let's look at the following CSS code:

The code is as follows:	Copy code
Input {star: expression ( Onmouseover = function () {this. style. borderColor = "#060 "}, Onmouseout = function () {this. style. borderColor = "# c00 "})}

The code above declares that when the mouse moves up, the border color is #060. When the mouse is removed, the border color is # c00. Let's take a look at the running effect:


Name:
Age:
Gender:
Mobile phone:
Address:

Of course, you can do the same. Let's take a look at the following running results:


Name:
Age:
Gender:
Mobile phone:
Address:

While defining the interaction effect of the input style in the input box, you can separately define the class for the input box, and control the input box with both the class and expression. More things require you to think more and experiment more. :)