0

0

利用css隐藏input的光标方法

小云云

小云云

发布时间:2017-12-22 15:05:33

|

4773人浏览过

|

来源于php中文网

原创

如何在不影响操作的情况下,把input的光标隐藏了?在网上搜索了很多方式:用p模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,于是最后终于找到了一种完美的方法。本文主要给大家介绍了关于如何利用css隐藏input光标的相关资料,这是最近工作中遇到的一个需求,虽然看似不合理,但是有需要就要有解决的办法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。

方法如下:

首先隐藏光标


  

因为光标是跟随文字的,所以我们把文字的color设置为透明,光标就不见了耶~

但是问题来了,文字都透明了要输入框有啥用?别着急,请往下看~

立即学习前端免费学习笔记(深入)”;

把文字给显示出来


  

在input上设置text-shadow,文字是透明的但是我们可以用文字阴影来代替文字的颜色,这样就完美解决啦。

text-shadow属性

语法:


text-shadow:x-offset y-offset blur color;

说明:

     x-offset:(水平阴影)表示阴影的水平偏移距离,单位可以是px、em或者百分比等。如果值为正,则阴影向右偏移;如果值为负,则阴影向左偏移;

Picsart
Picsart

Picsart是全球最大的数字创作平台。

下载

     y-offset:(垂直阴影)表示阴影的垂直偏移距离,单位可以是px、em或者百分比等。如果值为正,则阴影向下偏移;如果值为负,则阴影向上偏移;

     blur:(模糊距离)表示阴影的模糊程度,单位可以是px、em或者百分比等。blur值不能为负。如果值越大,则阴影越模糊;如果值越小,则阴影越清晰。当然,如果不需要阴影模糊效果,可以吧blur值设置为0;

     color:(阴影的颜色)表示阴影的颜色

相关推荐:

两种JS实现Input里添加小图标的方法

input 属性radio中设置checked 不生效的问题

javascript input输入框模糊提示功能详解

相关专题

更多
Word 字间距调整方法汇总
Word 字间距调整方法汇总

本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

2

2025.12.24

任务管理器教程
任务管理器教程

本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

2

2025.12.24

AppleID格式
AppleID格式

本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

0

2025.12.24

csgo视频观看入口合集
csgo视频观看入口合集

本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

29

2025.12.24

yandex外贸入口合集
yandex外贸入口合集

本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

58

2025.12.24

添加脚注通用方法
添加脚注通用方法

本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

1

2025.12.24

重启电脑教程汇总
重启电脑教程汇总

本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

3

2025.12.24

纸张尺寸汇总
纸张尺寸汇总

本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

5

2025.12.24

Java Spring Boot 微服务实战
Java Spring Boot 微服务实战

本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

1

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JS轻松实现打地鼠游戏
JS轻松实现打地鼠游戏

共6课时 | 0.7万人学习

HTML 代码实例
HTML 代码实例

共27课时 | 15.2万人学习

Sass 教程
Sass 教程

共14课时 | 0.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号