怎样运用css掩藏input的光标识例编码

日期:2020-09-19 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

序言

近期企业的ui忽然跑过来问我1个难题:“怎样在不危害实际操作的状况下,把input的光标掩藏了?”。

我坚信许多人会跟我1样,感觉这是个甚么狗屁要求,键入框不必光标这并不是反人类吗?可是大家只是个小小的的撸码仔,沒有辩驳的支配权只能默默接纳...

在网络上检索了许多方法:用div仿真模拟,设定readonly,设定disabled,设定全自动blur这些方法,发现都不可以考虑要求,最终還是寻找1位高手出示的方式完善处理。

方式以下:

最先掩藏光标

  <style>
    input{
      color: transparent;
    }
  </style>

由于光标是追随文本的,因此大家把文本的color设定为全透明,光标就看不到了耶~

可是难题来了,文本都全透明了要键入框有啥用?别心急,请往下看~

把文本给显示信息出来

  <style>
    input{
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
  </style>

在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:(黑影的色调)表明黑影的色调

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。