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-color
property 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-color
Properties 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
rem
Layout no longer used
JavaScript
Set 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)