Teminal-style Caret In Text Field – Caret.js

Category: Form | May 4, 2018
Author: jasperandrew
Views Total: 1,271
Official Page: Go to website
Last Update: May 4, 2018
License: MIT

Preview:

Teminal-style Caret In Text Field – Caret.js

Description:

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