Shulou(Shulou.com)06/01 Report--

This article mainly introduces the CSS to change the input box cursor color of the original attribute caret-color how to use, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

1. CSS changes the original attribute caret-color of the cursor color of the input box

The CSS caret-color property changes the color of the cursor inserted into the input box without changing the color of the contents in the input box.

For example:

Input {color: # 333; caret-color: red;}

As a result, the cursor color turns red and the text is still dark black:

Seeing is believing, you can click here: CSS caret-color changes the cursor color demo

/ / zxx: the word caret stands for "caret", which refers to the cursor in the content insertable state.

The caret-color property is valid not only for native input form controls, but also for setting normal HTML tags for contenteditable.

For example:

[contenteditable= "true"] {width: 120px; border: 1px solid # ddd; padding: 3px; line-height: 20px; color: # 333; caret-color: red;} text

The effect is as follows:

Compatibility

The caret-color attribute Chrome and Firefox are basically safe to use at the moment, but Safari and IE browsers will have to wait for some time.

For more information on compatibility, please see the screenshot below:

The following question is, for these incompatible browsers, is there any other way for them to achieve the discoloration effect of the insert state cursor?

Other methods to change the blinking cursor color of the input box

For IE browsers, the cursor color appears to be always fixed black and does not change with the color of the input box, so there is no good way for IE browsers.

However, for Safari browsers, because the blinking cursor color of the input box control is the same as the set color property color, we have the means to control the cursor.

The specific implementation code is as follows:

Input {color: red;} input::first-line {color: # 333;}

So the effect is achieved.

You can click here: change the insert cursor color demo with:: first-line

The effect of screenshot in Safari browser is as follows:

The method of using:: first-line pseudo elements works well in Chrome,Safari browsers, but it is not supported by Firefox browsers. It shows that the contents of the input box do not belong to:: first-line, so the entire input box text is red.

For browsers that do not support the:: first-line method, the relevant CSS will pollute the normal style presentation, so we need to deal with it differently, for example:

Input, input::first-line {color: # 333;} @ supports (- webkit-mask: none) {input {color: red;}}

However, this approach also has limitations, and there is nothing you can do with this multi-line input control, because:: first-line can only control the color of the first line of elements.

Third, the synthesis of the two implementation methods

Combining the above two methods, the best practices are as follows:

If the browser supports the caret-color attribute, use caret-color (Chrome/Firefox/Opera) first, then use the:: first-line method (Safari), and finally ignore it (such as IE).

The integrated CSS is as follows:

Input {color: # 333; caret-color: red;} @ supports (- webkit-mask: none) and (not (cater-color: red)) {input {color: red;} input::first-line {color: # 333;}}

The effect is as follows (Firefox screenshot):

Thank you for reading this article carefully. I hope the article "how to change the original attribute of CSS to change the color of the input box caret-color" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.