How to use css to hide the input cursor sample code_CSS tutorial_CSS_Web page production

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. In the article The CSS sample code is introduced in great detail. Friends who are interested in CSS and those who need it can refer to it. Let’s learn together with the editor.

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 to simulate , set readonly, set disabled, set automatic blur, etc., 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, so if we set the color of the text to transparent, the cursor will disappear~

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 on the input- shadow, the text is transparent but we can use the text shadow to replace the color of the text, which is a perfect solution.

text-shadowAttributes

Syntax:

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

Description:

x-offset: (horizontal shadow) represents shadow The horizontal offset distance, 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

Summary

The above is all the content of this article, I hope it can be helpful to everyone! !

Related recommendations:

Comprehensive methods of customizing text omission using pure CSS

css to realize the horizontal arrangement and scrolling effect of images

css and js to realize the pop-up login centering interface tutorial

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