css 隐藏光标,利用css隐藏input的光标方法

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

方法如下：

首先隐藏光标

input{

color: transparent;

}

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

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

把文字给显示出来

input{

color: transparent;

text-shadow: 0 0 0 #000;

}

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

text-shadow属性

语法：

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

说明：

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

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

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

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

css 隐藏光标,利用css隐藏input的光标方法相关推荐

css大图切割,利用CSS切割图片技术来动态显示图片
利用CSS切割图片来切换图片 .img2 { position:absolute; clip:rect(0px 20px 20px 0px); } .img1 { position:absolute; ...
用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
css初始化_利用CSS变量实现炫酷的悬浮效果
这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变.这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率. 怎样才能达到这个效果,使我们的网站脱颖而出呢?其实 ...
fullpage.js 滑入滑出滚屏动画, 纯css方式。利用css权重,无需js操作dom
**完整案例在下方** 1.分析如下图所示, 一共8屏, 当前在第2屏上,fullpage.js 会在当前可视屏的最外层div上,插入一个active的class,根据框架添加外层的active动态 ...
表格样式css制作html5,利用css实现的表格样式展示
本文为大家展示了几款美观的表格样式,希望大家可以喜欢. 1.单像素边框CSS表格 table.gridtable { font-family: verdana,arial,sans-serif; fo ...
css如何将图片调成合适大小,如何利用CSS自动调整图片的大小
经常更换wordpress主题,会有一个困扰,就是之前主题的内容区域宽度比较大,很多正文图片的尺寸可能是500px,而换了一个主题,内容区域的宽度比较小,假设是400px, 这时原先的图片宽度都是50 ...
PHP左侧分类表显示,利用CSS实现wordpress侧边栏分类目录分两列显示 | 迷失的世界...
细心的童鞋或许已经发现了我的博客侧边栏的那个分类目录已经由原来的一栏显示变成分两栏显示了,这个主要是根据你自己博客的需要去修改的,如果你希望实现,可以有很多功能强大的插件去实现分类目录分两栏显示,但是 ...
input禁止光标_利用css隐藏input的光标方法
如何在不影响操作的情况下,把input的光标隐藏了?在网上搜索了很多方式:用p模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,于是最后终于找到了一种完美 ...

css 隐藏光标,利用css隐藏input的光标方法

css 隐藏光标,利用css隐藏input的光标方法相关推荐

最新文章

热门文章

css 隐藏 光标,利用css隐藏input的光标方法

css 隐藏 光标,利用css隐藏input的光标方法相关推荐

最新文章

热门文章

css 隐藏光标,利用css隐藏input的光标方法

css 隐藏光标,利用css隐藏input的光标方法相关推荐