Using CSS to hide input cursor methods

How can I hide the cursor of input without affecting the operation? Search on the Internet a lot of ways: with the P simulation, set ReadOnly, set disabled, set automatic blur and so on, found that can not meet the demand, so finally found a perfect method. This article mainly introduces about how to use CSS to hide input cursor data, this is a recent work encountered in a demand, although seemingly unreasonable, but there is a need to solve the method, the text through the sample code introduced in very detailed, the need for friends can refer to the reference, Follow the small series to learn together.

Here's how:

Hide Cursor First

  <style>    input{      color:transparent;    }  </style>

Because the cursor is followed by the text, so we set the color of the text to be transparent, the cursor is gone Yes ~

But the question comes, the text is transparent. What is the use of the input box? Don't worry, please look down ~

Show the text.

  <style>    input{      color:transparent;      text-shadow:0 0 0 #000;    }  </style>

Set Text-shadow on input, the text is transparent, but we can use the text shadow to replace the text color, so that the perfect solution.

Text-shadow Property

Grammar:

Text-shadow:x-offset y-offset blur color;

Description

X-offset: (horizontal shadow) indicates the horizontal offset distance of the shadow, which can be px, EM, or percent, and so on. If the value is positive, the shadow is shifted to the right, and if the value is negative, the shadow shifts to the left;

Y-offset: (vertical shadow) represents the vertical offset distance of the shadow, in units of PX, EM, or percent. If the value is positive, the shadow is shifted downward, and if the value is negative, the shadow is offset upward;

Blur: (fuzzy distance) indicates how blurry the shadow is, in pixels, EM, or percentages. The blur value cannot be negative. The larger the value, the more blurry the shadow, and the clearer the shadow if the value is smaller. Of course, if you don't need a shadow blur effect, you can set the blur value to 0;

Color: (The color of the shadow) indicates the colors of the shadow