input标签去除边框和阴影框并且用户无法修改

最新推荐文章于 2023-12-22 14:51:38 发布

原创最新推荐文章于 2023-12-22 14:51:38 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #input #前端 #HTML

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何通过CSS和HTML代码解决input框点击时出现的阴影问题，提供具体代码实现，适用于谷歌和火狐浏览器，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

可以看到当我单击这个input框时，浏览器就会生成这个阴影非常影响用户体验！
在这里插入图片描述
首先input标签去掉边框

border: none;

然后用户无法修改内容并且只能复制使用以下标签：

 readonly="readonly"

最后就出现了上述问题，其实我们只要加上以下代码即可：

CSS形式：

#input:focus  {
-webkit-box-shadow: 0 0 0 #fff;
  -moz-box-shadow:0 0 0 #fff;
｝

Html形式：

-webkit-box-shadow: 0 0 0 #fff;  
-moz-box-shadow:0 0 0 #fff;

一个针对谷歌，另一个针对火狐！

然后我在这边是这样写的：

$("#refresh").append("<input type=\"text\" readonly=\"readonly\" value=\"" + value + "\" style='border: none;outline: none;color: #fff;-webkit-box-shadow: 0 0 0 #fff;-moz-box-shadow:0 0 0 #fff;'/>");

我本身是写在js里面的，其实知道的小伙伴一定都知道，其实跟HTML是一样的！
最后就实现了如下效果：
在这里插入图片描述
可以看到我当我鼠标单击已经什么都没有了！