css - HTML 输入，没有焦点的闪烁插入符？

Question

是否可以让闪烁的插入符永久显示在 HTML 输入中而无需聚焦输入？

如果不是，我会设计一个形状像插入符号的 CSS div，使其在聚焦时闪烁并消失，但在我解决这个问题之前，有没有更简单的方法？

Answer 1

你可以试试动画背景:

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=""/>

您可以在 http://codepen.io/gc-nomade/pen/jyLMLd 上使用它