模仿闪烁的光标

<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. C#集合类型大揭秘 【转载】

    [地址]https://www.cnblogs.com/songwenjie/p/9185790.html 集合是.NET FCL(Framework Class Library)的重要组成部分,我们 ...

  2. Day 15 模块

    模块 ```python'''模块:一系列功能的集合体 定义模块:创建一个py文件就是一个模块,该py文件名就是模块名 使用模块:在要使用模块的文件中,通过 import 模块名 来导入模块''' ' ...

  3. 记录一次MyEclipse打开jsp文件出现Error的解决办法

    今天正在忙着写项目,在打开一个项目内的jsp文件时发现我亲爱的代码消失了. 最后从网上找到了解决办法,希望可以帮到有需要的人,也作为个人记录 第一步:找到安装路径MyEclipse\configura ...

  4. Qt控制流简析

    前言: Qt库及其绑定python语言的PySide库.PyQt库在圈中已经是TD的标配了,Qt提供了多种快速绘制图形窗口的方式.但正是因为这个原因,导致很多TD局限在设计窗口外观的桎梏中,而忽略了Q ...

  5. Axure RP 7 8

    Axure RP 7.0 用户名:axureuser 序列号:8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyPD6lK7G6+tqEV4LG Axur ...

  6. webRTC中音频相关的netEQ(五):DSP处理

    上篇(webRTC中音频相关的netEQ(四):控制命令决策)讲了MCU模块是怎么根据网络延时.抖动缓冲延时和反馈报告等来决定给DSP模块发什么控制命令的.DSP模块根据收到的命令进行相关处理,处理简 ...

  7. 【总结】Java异常分类

    链接:https://www.nowcoder.com/questionTerminal/3ded1983c85c4ae197e005bd31777bc7来源:牛客网 Throwable是所有异常的根 ...

  8. idea 优先引用项目代码,而非jar包

    1.现有项目,和jar包源码在同一层目录 2.idea直接打开ccccc,右键a,b两个文件中的pom.xml加入maven project,如下: 执行1,2 步骤,在b中引入a,刚引入a在最下方, ...

  9. Egret飞行模拟-开发记录01

    1.项目结构简介 1.1 index.html:应用入口文件,我们可以在这里面配置项目的旋转缩放模式背景颜色等. 1.2 egretProperties.json:这个文件里面进行项目配置,包括模块和 ...

  10. C#对屏幕分辨率的操作

    winform应用程序 1.新建Resolution.cs类 using System; using System.ComponentModel; using System.Windows.Forms ...