Hide input cursor with css

This time I will bring you the use of css to hide the input cursor. What are the precautions. Here is a practical case, let’s take a look.

Preface

Recently, the company's UI suddenly came to me and asked me a question: "How to change the input without affecting the operation?" The cursor is hidden?"

I believe many people will be like me and think this is a bullshit requirement. Isn’t it anti-humanity to not have the cursor in the input box? It's a pity that we are just little coders. We have no right to refute and can only accept it silently...

Search on the InternetThere are many ways: use p simulation, set readonly, set disabled , setting automatic blur and other methods, but found that none of them could meet the needs. Finally, I found a perfect solution provided by a master.

The method is as follows:

First hide the cursor

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

Because the cursor follows the text, we set the color of the text to transparent, and the cursor will It’s gone~

But here’s the problem, what’s the use of an input box when the text is already transparent? Don't worry, please look down~

Display the text

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

Set text-shadow on the input. The text is transparent but we can use text shadow to replace the color of the text. This is the perfect solution.

text-shadowAttributes

Syntax:

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

Description:

x-offset: (horizontal shadow) represents the horizontal offset distance of the shadow, the unit can be px, em or percentage, etc. If the value is positive, the shadow is offset to the right; if the value is negative, the shadow is offset to the left;

y-offset: (vertical shadow) represents the vertical offset distance of the shadow, the unit can be px , em or percentage, etc. If the value is positive, the shadow is shifted downward; if the value is negative, the shadow is shifted upward;

blur: (blur distance) indicates the degree of blur of the shadow, the unit can be px, em or percentage, etc. . The blur value cannot be negative. If the value is larger, the shadow is blurrier; if the value is smaller, the shadow is clearer. Of course, if you don’t need the shadow blur effect, you can set the blur value to 0;

color: (the color of the shadow) indicates the color of the shadow

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Animation sequence animation for css3

##CSS Weird Box Model and Standards How to use the box model

The above is the detailed content of Hide input cursor with css. For more information, please follow other related articles on the PHP Chinese website!