Teminal-style Caret In Text Field – Caret.js

Caret.js is a vanilla JavaScript plugin to replace the default text cursor with a terminal-style caret notation in your text fields.

How to use it:

Import the ‘caret.js’ script into the html document.

<script src="caret-js/caret.js"></script>

Apply the terminal-style caret to your input field.

<input id="caret-demo" class="caretjs" maxlength="15">

The primary CSS styles for the caret.

.caretjs {
  display: inline-block;
  font-family: monospace;
}
.caretjs + span {
  font-family: monospace;
  background: transparent;
  position: relative;
  right: 0;
  margin: 0;
}
#caret-demo {
  background-color: gray;
  color: #fff;
  padding: 2em;
}