首页 > 其他 > 详细

修改输入框光标的样式

时间:2021-07-15 11:50:54      阅读:9      评论:0      收藏:0      [点我收藏+]

需求:只修改输入框光标的样式,输入字体样式不变

推荐方法·:

input,
textarea {
    font-size: 24px;
    padding: 10px;
     
    color: #0351FB; // 光标颜色
    text-shadow: 0 0 0 #212121; // 文本颜色
    -webkit-text-fill-color: transparent; // 隐藏原本文字
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
    color: #F3F4FB;  // 改变placeholder文本颜色
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

 

其他方法:

  1. 字体和光标同时改变
    input {
        color: red;
    }
  2. 有兼容性问题,低版本浏览器部分移动端不会显示
    input {
        caret-color: red;  // css3属性
    }

     

修改输入框光标的样式

原文:https://www.cnblogs.com/jzyu/p/15013891.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!