CODEWITHSUNDEEP
csshtmlformsinput
Ash
Ash

Reputation: 822

HTML input, blinking caret without focus?

Is it possible to have the blinking caret appear permanataly in an HTML input without having to focus the input?

If not I will style a CSS div shaped like a caret to blink on and off and dissapear when focused, but before I go to that hassle is there an easier way?

Upvotes: 0

Views: 1604

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105933

You can give a try to animated background :

input:focus {
  background-image:none;
}
input {
  animation: blink-empty 1s infinite;
  background-image:/*linear-gradient(black,black)*/ linear-gradient(red,red);
  background-position: 1px  center;
  background-repeat: no-repeat;
  background-size:1px 1.2em;
}
@keyframes blink-empty {
  30%, 75%{background-size:1px 1.2em;}
  50% {background-size: 0 1.2em;}
}
<p>fake carret on left side colored red for demo. but will not follow text if any.</p>
<input type="text" value=""/>

you can play with it at http://codepen.io/gc-nomade/pen/jyLMLd

Upvotes: 2

Related Questions