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="//m.sbmmt.com/wiki/971.html" target="_blank">:first-line</a> pseudo-element

• Use <a href="//m.sbmmt.com/wiki/861.html" target="_blank">text-shadow</a> and text-fill-color

• ##Use

  caret-color

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.

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.

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

@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; /* 光标颜色 */
    }
}

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!