Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to achieve css text box without cursor, has a certain reference value, interested friends can refer to, I hope you read this article after a great harvest, the following let Xiaobian take you to understand.

Methods: 1. Add the "color:transparent;" style to the text box element to make the text and cursor in the text box transparent;2. Add the "text-shadow:h-shadow v-shadow blur color;" style to the text box element to make the text display.

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

To achieve a text box without a cursor we need two steps, first we have to set the text in the text box to transparent, the cursor color when following the text, so set the text to transparent then the cursor in the text box is transparent invisible.

We can't do this because we can't see the text, so we just need to set the text-shadow property to display it.

The attribute syntax is:

text-shadow: h-shadow v-shadow blur color;

Let's take a look at the application of this method through an example, as follows:

input{ color: transparent; text-shadow: 0 0 0 #000; }name:

When no style is added to the text box, the cursor looks like this:

When you style a text box, the output looks like this:

As above, there is no cursor in the text box.

Thank you for reading this article carefully. I hope that the article "How to achieve cursor-free text box in CSS" shared by Xiaobian will help everyone. At the same time, I hope that everyone will support it more. Pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.