How to hide the input cursor using css

How to hide the input cursor without affecting the operation? I searched many methods on the Internet: use p simulation, set readonly, set disabled, set automatic blur, etc., but found that none of them could meet the needs, so I finally found a perfect method. This article mainly introduces you to the relevant information on how to use CSS to hide the input cursor. This is a requirement encountered in recent work. Although it seems unreasonable, there is a solution if necessary. The article introduces it through sample code. It's very detailed. Friends who need it can refer to it. Let's learn with the editor below.

The method is as follows:

First hide the cursor

##

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

Because the cursor follows the text, So we set the color of the text to transparent, and the cursor disappears~

But here comes the problem, what is the use of the input box when the text is 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 instead of text color, this is the perfect solution.

text-shadow property

## 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

Related recommendations:

Two JS methods to add small icons to Input

The problem that setting checked in the input attribute radio does not take effect

Detailed explanation of fuzzy prompt function of javascript input box

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