模仿input闪烁光标
模仿闪烁的光标
<span class="cursor-blink"> </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;
}
}
占半个字符,闪烁起来有点大,命令工具闪烁,所以加一个宽度
根据场景需要,可以用伪类实现,::bdefore或者::after,需要的小伙伴可以试试
仅做参考
模仿input闪烁光标的更多相关文章
- RichtextBox去除闪烁光标
http://files.cnblogs.com/xe2011/CustomRichTextBox_HideCaret.rar richTextBox能高亮选择,光标仍在,没有光标闪烁 把重RichT ...
- JQUERY实现点击INPUT使光标移动到最后或指定位置
下面本文章给大家简单介绍一下JQUERY实现点击INPUT使光标移动到最后或指定位置例子,希望对各位有帮助,你要知道面对一个 处女座的 需求者, focus()是远远不够的,比如说“我点进去的时候光标 ...
- 在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...
- Css——设置input输入框光标颜色
在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况.谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢? 上面描述的情景有两种实现方式 ...
- 教你如何使用css隐藏input的光标
今天公司的ui突然跑过来问我一个问题:"如何在不影响操作的情况下,把input的光标隐藏了?". 我相信很多人会跟我一样,觉得这是个什么狗屁需求,输入框不要光标这不是反人类吗?可惜 ...
- ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...
- h5 ios手机 隐藏input输入光标
前面在做一个H5中用到的6位数字密码弹框(类似支付.微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层. 先说下实现密码 ...
- 控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...
- css只改变input输入框光标颜色不改变文字颜色实现方法
input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...
随机推荐
- python安装media报错
Try https://pypi.python.org/pypi/setuptools easy_install LEE 我后来,依次在Python2.7中装了 numpy-1.7.0-win32-s ...
- MQTT研究之EMQ:【SSL证书链验证】
1. 创建证书链(shell脚本) 客户端证书链关系: rootCA-->chainca1-->chainca2-->chainca3 ca caCert1 caCert2 caCe ...
- Java开发中判断集合类为空的方法-转载
避免写两个判断 org.springframework.util.CollectionUtils 方法: public static boolean isEmpty(Collection collec ...
- C#中将鼠标光标变为忙碌状态
this.Cursor = System.Windows.Forms.Cursors.WaitCursor; do_longtime_work(); this.Cursor = System.Wind ...
- [蓝桥杯]PREV-19.历届试题_九宫重排
题目描述: 代码如下: #include <stdio.h> #include <stdlib.h> #include <string.h> #define N 1 ...
- htm,css,javascript及其他的注释方式
转自:http://www.cnblogs.com/dapeng111/archive/2012/12/23/2829774.html 一.HTML的注释方法<!-- html注释:START ...
- [UE4]Spline使用注意事项
一.如果在Character中使用Spline,则使用Add Spline Mesh Componet的时候,要注意设置Transform.Mobility为Movable 二.使用Predict P ...
- robotframework在3.7下的搭建
网上看了大多安装RIDE都是在python2的环境下,今天试了下python3的安装,成功了,步骤如下: 1.首先是python3的安装,以及pip这些工具,具体的网上一堆,不再啰嗦 2.安装robo ...
- realm清空所有数据库的数据
/* *清空数据库 */ public int clearDatabase() { Realm realm = Realm.getDefaultInstance(); try { realm.begi ...
- C# 密码盐码加密
每次新建账号密码的时候都需要获取一下新的盐码,之后用使用MD5为用户密码加密 /// <summary> /// 获取新的密码盐码 /// </summary> /// < ...