CSS change insertion cursor Color Caret-color introduction and other color changing methods

First, CSS changes the input box cursor color of the native attribute Caret-color

CSS caret-color Properties can change the color of the input box's insertion cursor without changing the color of the contents of the input box.

For example:

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

The cursor color turns red and the text is dark black:

Seeing is believing, you can ruthlessly click here: CSS caret-color Change Cursor Color demo

ZXX: The word caret means "caret", which is the cursor that is in the content-pluggable state.

caret-colorproperty is valid not only for native input form controls, contenteditable but also for normal HTML tags.

For example:

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

<div contenteditable= "true" > Text </div>

Effects such as:

Compatibility

caret-colorProperties currently Chrome and Firefox are basically safe to use, but Safari and Internet Explorer will have to wait a few days.

For specific compatibility data, see below:

The following question, for these incompatible browsers, there is no other way to enable them to achieve the insertion status of the cursor color effect?

Ii. other ways to change the blinking cursor color of the input box

For IE, the cursor color is always fixed black, does not follow the input box color color changes, so there is no good way for IE browser.

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: by: First-line change the insertion cursor color demo

The following effects are shown in the Safari browser:

The use ::first-line of pseudo-element method in the Chrome,safari browser performance is good, but the Firefox browser is not supported, it behaves as <input> the input box content does not belong ::first-line to, therefore, the entire input box text is red.

For browsers that do not support methods, the ::first-line CSS will pollute the normal style, so we need to differentiate the processing, for example:

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

However, there are limitations to this approach, and there is <textarea> nothing to do with this multi-line input control because ::first-line only the first line element color can be controlled.

Three, two kinds of realization method synthesis

Combining the above two methods, you can get the best practices as follows:

If the browser supports caret-color attributes, take precedence caret-color (Chrome/firefox/opera), second use ::first-line method (Safari), and finally ignore (ie, for example).

Post-integration 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):

You can ruthlessly click here: Caret-color plus first-line change the input cursor color demo

remLayout no longer used JavaScriptSet up

The principles and details that are not explored here are not rem familiar with the children's shoes suggested to go bad.

Demand

Sometimes, the mobile end with the rem layout, according to different screen width to set different font-size to do to fit, to write a lump JS to set, can not use JS it?

For example: With the 750px design draft as the benchmark, the root node font-size is set to 100px , only consider DPR 2 the case, only consider the simplest case

Document. queryselector (' HTML').  Style. '${window.} PX';        

Code

Now the mobile css3 unit vw , wh compatibility has been very good, in the case of an Android device that does not need to be compatible with too low version can be:

html{    font-size: 100vw / 7.5}

CSS change insertion cursor Color Caret-color introduction and other color changing method (Turn)