Hide the cursor of input with CSS

This time to bring you a CSS to hide input cursor, using CSS to hide the input cursor attention to what is, the following is the actual case, together to see.

Objective

Recently the company's UI suddenly came up and asked me a question: "How can I hide the cursor of input without affecting the operation?" ”。

I believe a lot of people will be like me, think this is a bullshit demand, input box not the cursor this is not anti-human? Unfortunately we are only a small size, no rebuttal right can only silently accept ...

Search on the Internet a lot of ways: with P simulation, set ReadOnly, set disabled, set automatic blur and so on, found that can not meet the needs, and finally find a great God to provide a perfect solution.

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

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Animated sequence of CSS3 animation

How CSS quirks box models and standard box models are used