猎狐姥爷 '猎狐姥爷' 发布于2017-08-31,阅读269次,热度0次

【代码片段】如何使用CSS来快速定义多彩光标


对于web开发中,我们经常都看得到需要输入内容的组件和元素,比如,textarea,或者可编辑的DIV(contenteditable) ,如果你也曾思考过使用相关方式修改一下光标颜色的,那么这篇技术小分享,你绝对不应该错过哈~




使用如下的CSS代码即可实现光标颜色的设定


CSS

    input,
    textarea,
    [contenteditable] {
      caret-color: orange;
    }


相关HTML

  <input type="text" placeholder="邮件">
  <br><br>
  <textarea name="comments" id="" cols="30" rows="10"></textarea>
  <br><br>
  <div contenteditable>igeekbar.com - 请点击我</div>


在线演示

地址:http://www.igeekbar.com/igclass/code/c986f33e-c8af-482d-ad98-984dbacbad60.htm




如果想更好玩的话,可以让你的光标在输入框中支持多颜色变化


CSS代码

  @keyframes rainbow {
    0% { caret-color: red; }
    20% { caret-color: orange; }
    40% { caret-color: yellow; }
    60% { caret-color: green; }
    80% { caret-color: blue; }
    100% { caret-color: purple; }
  }

  input {
    padding:10px;
    font-size:18px;
    width:80%;
    caret-color: orange;
    display: block;
    margin-bottom: .5em;
  }

  input:focus {
    animation: 3s infinite rainbow;
  }body {
    background-color: orange;
  }

以上代码使用keyframe来生成动画效果,再设置为input:focus属性中,这样用户点击输入框,都会生成不同的光标颜色, 非常有趣,大家有兴趣可以点击下面链接尝试一下

在线演示:http://www.igeekbar.com/igclass/code/148e9cb3-61be-4954-9447-c931eb4e7c4d.htm

是不是有点意思, 如果大家有更好玩的光标CSS效果,请立刻留言和我分享,感谢阅读~~



扫一扫移动端阅读或分享

猎狐姥爷  心存创客教育心的铲屎”老官“ ^_^

喜欢研究互联网产品相关UI/UX及代码实现,业余时间喜欢骑摩托车和拳击的程序猿大叔~~
     扫一扫立刻加入iGeekBar会员QQ群(545980198)
    和更多iG客会员交流分享吧~