How to hide the blinking cursor in an input text?

The Step-by-Step Guide

There are multiple ways and combinations to make the cursor blink its last blink. Let's dive deeper into them:

Synchronizing cursor color with your input background

If the completely invisible cursor is too much for you, have the cursor match the background color of your input field:

input.camo-cursor {
  caret-color: #FFFFFF; /* Now your cursor is a chameleon. Let's see them spot this! */
}


"Read-Only Field" - Not the best disguise

While setting an input field as readonly does prevent users from modifying the input value, it fails to get rid of our not-so-little blinking culprit. Here’s a better disguise:

input.readonly-cursor {
  caret-color: transparent;  /* The cursor is now in incognito mode. */
}


Clickable, yet cursor-less inputs

What if you require your input fields to be interactively non-editable like dropdown menus? Let's introduce a small tweak with JavaScript:

document.querySelector('.no-cursor').addEventListener('mousedown', function(event) {
  event.preventDefault(); /* The cursor is not invited to this party. */
});


Apply the necessary class to your <input>, and voila!

<input type="text" class="no-cursor">


Removing focus using jQuery

If you want to remove the cursor after an input field has gained focus, use the trusty old blur() method from jQuery:

$('input').focus(function(){
  $(this).blur(); /* It's like cursor version of playing Hide and Seek */
});


Keep the words, lose the cursor

Styling a subtle text shadow helps maintain text visibility even with our cursor MIA. Here's how:

input.no-cursor {
  caret-color: transparent;
  text-shadow: 0px 0px 1px #000; /* Words floating like Voldemort's specter. */
}


Tweaking your inputs for visual perfection

Tweaking the margin and padding of your input boxes can drastically enhance their appearance while keeping that cursor hidden, like so:

input.squeeze-cursor {
  caret-color: transparent;
  padding: 10px;
  margin: 5px; /* Tight squeeze there mate, making that cursor disappear */
}


Functional but cursor-less

You can make inputs functional but without a cursor, without using the disabled attribute:

<input type="text" class="functional-cursor-less"> /* Cursorless, but not useless. */


Styling inside the parent div

A selectable input field paired with a styled parent div can be a great combination to manipulate the cursor's visibility:

<div class="input-wrapper">
  <input type="text" class="hide-cursor">
</div>


Visualization

See your cursor's journey in hiding:

Before: .......|....... (Cursor believes in being punctual, often uninvited)

Applying CSS for hiding the cursor:

input { caret-color: transparent;} /* Now, that's what I call a professional hide and seek game! */


After: ......... (It's so quiet...)