模仿闪烁的光标

<span class="cursor-blink">&nbsp;</span>

样式代码:

 .cursor-blink {
display: inline-block;
width: 1px;
animation: blink 1s infinite steps(1, start);
}
/*这里设置动画blink*/
@keyframes blink {
0%, 100% {
background-color: #000;
color: #aaa;
}
50% {
background-color: #bbb; /* not #aaa because it's seem there is Google Chrome bug */
color: #000;
}
}

&nbsp;占半个字符,闪烁起来有点大,命令工具闪烁,所以加一个宽度

根据场景需要,可以用伪类实现,::bdefore或者::after,需要的小伙伴可以试试

仅做参考

模仿input闪烁光标的更多相关文章

  1. RichtextBox去除闪烁光标

    http://files.cnblogs.com/xe2011/CustomRichTextBox_HideCaret.rar richTextBox能高亮选择,光标仍在,没有光标闪烁 把重RichT ...

  2. JQUERY实现点击INPUT使光标移动到最后或指定位置

    下面本文章给大家简单介绍一下JQUERY实现点击INPUT使光标移动到最后或指定位置例子,希望对各位有帮助,你要知道面对一个 处女座的 需求者, focus()是远远不够的,比如说“我点进去的时候光标 ...

  3. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  4. Css——设置input输入框光标颜色

    在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况.谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢? 上面描述的情景有两种实现方式 ...

  5. 教你如何使用css隐藏input的光标

    今天公司的ui突然跑过来问我一个问题:"如何在不影响操作的情况下,把input的光标隐藏了?". 我相信很多人会跟我一样,觉得这是个什么狗屁需求,输入框不要光标这不是反人类吗?可惜 ...

  6. ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  7. h5 ios手机 隐藏input输入光标

    前面在做一个H5中用到的6位数字密码弹框(类似支付.微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层. 先说下实现密码 ...

  8. 控制input输入框光标的位置

    一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...

  9. css只改变input输入框光标颜色不改变文字颜色实现方法

    input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...

随机推荐

  1. python安装media报错

    Try https://pypi.python.org/pypi/setuptools easy_install LEE 我后来,依次在Python2.7中装了 numpy-1.7.0-win32-s ...

  2. MQTT研究之EMQ:【SSL证书链验证】

    1. 创建证书链(shell脚本) 客户端证书链关系: rootCA-->chainca1-->chainca2-->chainca3 ca caCert1 caCert2 caCe ...

  3. Java开发中判断集合类为空的方法-转载

    避免写两个判断 org.springframework.util.CollectionUtils 方法: public static boolean isEmpty(Collection collec ...

  4. C#中将鼠标光标变为忙碌状态

    this.Cursor = System.Windows.Forms.Cursors.WaitCursor; do_longtime_work(); this.Cursor = System.Wind ...

  5. [蓝桥杯]PREV-19.历届试题_九宫重排

    题目描述: 代码如下: #include <stdio.h> #include <stdlib.h> #include <string.h> #define N 1 ...

  6. htm,css,javascript及其他的注释方式

    转自:http://www.cnblogs.com/dapeng111/archive/2012/12/23/2829774.html 一.HTML的注释方法<!-- html注释:START ...

  7. [UE4]Spline使用注意事项

    一.如果在Character中使用Spline,则使用Add Spline Mesh Componet的时候,要注意设置Transform.Mobility为Movable 二.使用Predict P ...

  8. robotframework在3.7下的搭建

    网上看了大多安装RIDE都是在python2的环境下,今天试了下python3的安装,成功了,步骤如下: 1.首先是python3的安装,以及pip这些工具,具体的网上一堆,不再啰嗦 2.安装robo ...

  9. realm清空所有数据库的数据

    /* *清空数据库 */ public int clearDatabase() { Realm realm = Realm.getDefaultInstance(); try { realm.begi ...

  10. C# 密码盐码加密

    每次新建账号密码的时候都需要获取一下新的盐码,之后用使用MD5为用户密码加密 /// <summary> /// 获取新的密码盐码 /// </summary> /// < ...