Teminal-style Caret In Text Field – Caret.js

Category: Form | May 4, 2018
Views Total:2,277 views
Official Page:Go to website
Last Update:May 4, 2018


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;

You Might Be Interested In:

Leave a Reply