How to hide the insertion cursor in a web page using CSS
How to Hide the Insert Cursor on a Web Page Using CSS
Bold text, also known as the text cursor, appears on the screen as an indicator of where text entry will begin. This helps users see where they are adding text. Many user interfaces use a thin vertical line or a blinking box to represent the cursor, and this varies across browsers and interfaces.
In this article, we’ll look at how to hide the insertion cursor on a web page using CSS.
How to Hide the Insert Cursor
The insertion dot is a flashing vertical line you may have seen in input fields; it indicates where text will be inserted. To hide the cursor in input fields on our web pages, we use the cursor-color property in CSS. This property typically takes three values: auto, color, and transparent. Let’s look at the syntax for bold color.
The vertical line or cursor color can be set to any color from the RBGA palette.
Let’s look at another example so we can understand how to use the caret-color property to set its value to transparent, thereby making the caret disappear.
Example
In this example, we’ll create two input fields again. In the first field, we’ll use the caret-color property and set its value to red. This means the caret will now be red, and when it flashes, we’ll see red. In the second input field, we’ll use the caret-color property and set its value to transparent. This will hide the caret when the text field is clicked. Let’s take a look at the code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the hiding the insertion caret</title>
<style>
.cursor {
caret-color: transparent;
}
body {
text-align: center;
}
.clr{
caret-color: red;
}
</style>
</head>
<body>
<p>Following textbox have colored insertion caret.</p>
<input type="text" class="clr"><br><br>
<p>Here we are trying to hide the insersion caret.</p>
<input type="text" class="cursor">
</body>
</html>
In the code above, you can see that we’ve given the two input fields two classes for easier understanding. To differentiate them, we’ve used the caret-color property in the style section to hide the caret and set its color.
You can see in the output above that we have both a “red cursor” and a “hidden input cursor,” which will function when the user clicks on the input field.
Elements where we can see the cursor
We can see the cursor in the following element:
<input type="text">
<input type="password">
<input type="search">
<input type="date">
<input type="time"> <input type="datetime-local">
<input type="number">
<input type="range">
<input type="email">
<input type="tel">
<input type="url">
<textarea>
Conclusion
Different browsers and user interfaces represent bold text differently, but most browsers and user interfaces have a thin vertical line flashing, also known as inset text, because it indicates where the user should start writing text. Bold text is most commonly seen in input and textarea elements. We can edit the caret using the caret-color property, which accepts values of color, auto, and transparent.
In this article, we’ve learned how to use the caret-color property to hide the insertion cursor on a web page.