CSS custom setting element blinking cursor color

This time I will bring you the CSS custom setting element blinking cursor color, what are the precautions for CSS custom setting element blinking cursor color, the following is a practical case, let's take a look.

Preface

Due to business needs, the text in our input box is required to be of a different color from the floating cursor. It is definitely difficult to find a solution to this problem in books, and it needs to be done through daily basics. Accumulation and experience.

Solution

• Use :<a href="http://www.php.cn/wiki/971.html" target="_blank">:first-line</a> pseudo-element

• Use <a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a> and text-fill-color

• ##Use

  caret-color

::fist-line Modify elements

Principle: Generally speaking, set the color of the input box The property modifies the color of the text content and also changes the color of the cursor. And ::first-line can also set the color of the first line of text content. Using the weight ratio of the selector, ::first-line overrides the former's color, finally got the desired result.

input.form-control {
    color: #05d380; /* 光标颜色 */
}
input.form-control::first-line {
    color: #333; /* 文本颜色 */
}

Defects: Only applies to input boxes, and WeChat webview does not support it. Two selectors need to be written.

text-shadow and text-fill-color

Principle: First use color to set the color of the text and cursor, and then use text-shadow Set text shadow to cover the text color, and finally use text-fill-color to make the text color transparent.

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}

Defects: text-fill-color The attribute does not support firefox, currently try to use -webkit- prefix.

caret-color

Principle: This is the latest attribute of CSS3, its purpose is to solve the problem of cursor color.

.form-control {
    color: #333; /* 文本颜色 */
    caret-color: #05d380; /* 光标颜色 */
}

Defects: Low versionIE browserNot supported

Compatibility considerations

In order to be compatible with multi-terminal device display, We must take some situations into consideration and use

@support conditional judgment to detect whether it is available. Because my environment is mobile display, so as long as it is required to be compatible with mobile terminals, combining the second and third solutions can cover a large area of ​​​​the device.

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}
@supports (caret-color: #05d380) {
    .form-control {
        color: #333; /* 文本颜色 */
        caret-color: #05d380; /* 光标颜色 */
    }
}

Summary

In the recent demand, there are more and more mobile terminal developments, and device compatibility has always been a headache. How to debug in a better way and write more compatible products? Strong code. What is needed is constant summarization to reduce the recurrence of errors.

In the end, I hope it can help everyone. I hope everyone will like it more and collect it!!

I believe you have mastered the method after reading the case in this article. For more exciting things, please pay attention to php Chinese website Other related articles!

Recommended reading:

How to deal with MySQL database access denial

Linux background running node service instructions steps and methods

The above is the detailed content of CSS custom setting element blinking cursor color. For more information, please follow other related articles on the PHP Chinese website!