• 技术文章 >web前端 >css教程

    css怎样实现文本框无光标

    长期闲置长期闲置2021-11-24 10:47:53原创54

    方法:1、给文本框元素添加“color:transparent;”样式使文本框内的文字和光标透明;2、给文本框元素添加“text-shadow:h-shadow v-shadow blur color;”样式使文字显示出来即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css怎样实现文本框无光标

    想要实现文本框没有光标我们需要两步,首先我们要将文本框内的文字设置为透明,光标的颜色时跟随文字的,所以设置文字为透明那么文本框内的光标也就透明不可见了。

    这时候不能达到我们的目的,因为文字我们也看不见了,这时候我们只需要给文本框文字设置一下text-shadow属性使其显示出来即可。

    该属性语法为:

    text-shadow: h-shadow v-shadow blur color;

    1124.12.png

    下面我们通过示例来看一下该方法的应用,示例如下:

    <!DOCTYPE html>
    <html>
    <style>
      input{
        color: transparent;
        text-shadow: 0 0 0 #000;
      }
    </style>
    <body>
    name:
    <input type="text">
    </body>
    </html>

    当没有给文本框添加样式时,光标如下:

    1124.01.gif

    当给文本框添加样式之后,输出结果如下:

    1124.02.gif

    如上实现文本框内无光标了。

    (学习视频分享:css视频教程

    以上就是css怎样实现文本框无光标的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 文本框 光标
    上一篇:css怎样修改第n个元素样式 下一篇:css怎样隐藏行元素
    VIP会员

    相关文章推荐

    • css如何设置div之间距离• css怎样设置hr居中• css实现旋转45度的属性是什么• css怎样实现自适应正方形• css怎样修改第n个元素样式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网