安卓html元素被点击时产生的边框怎么去掉

Posted 2023-04-24

　在android手机中，当处于模块一状态时，用户触摸到“查看按钮”，a标签的边框显示出来，这明显不是我们要想要的体验。

　　最后跟产品经理沟通后，针对android手机去除上图的按钮边框，那么如何去除android手机自带的按钮边框呢？

　　在搜索引擎中找到资料-webkit-tap-highlight-color可以去除边框，如下图：

　　排除误解

　　网络资料说这个属性只用于ios(iPhone和iPad)，其实是错误的，android手机大部分也是支持的，只是显示效果不一样，移动开发并不成熟，更多的还需要大家去实践来辨别真伪- -

　　-webkit-tap-highlight-color用法

　　webkit内核的浏览器，当用户点击一个链接或者通过js定义的可点击元素的时候，会出现一个半透明的灰色背景或者红色的边框。

　　如果想要禁用高亮，可设置颜色的alpha值为0，也就是属性值的最后一位设置为0就可以去除背景或者边框。

　　去除android链接触摸时产生边框的css代码

　　a,button,input-webkit-tap-highlight-color:rgba(255,0,0,0);/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */

参考技术A

安卓webview中的html界面，点击时产生的边框，可以在js的代码中给元素添加如下属性：-webkit-tap-highlight-color即可去掉边框。

1.webkit内核的浏览器，当用户点击一个链接或者通过js定义的可点击元素的时候，会出现一个半透明的灰色背景或者红色的边框。

2.如果想要禁用高亮，可设置颜色的alpha值为0，也就是属性值的最后一位设置为0就可以去除背景或者边框。去除android链接触摸时产生边框的css代码

a,button,input-webkit-tap-highlight-color:rgba(255,0,0,0);/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */

参考技术B 部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea
a,button,input-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;

-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类还有个办法，不使用a或者input标签，直接用div标签本回答被提问者采纳 参考技术C 部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea-webkit-tap-highlight-color: rgba(0,0,0,0;)-webkit-user-modify:read-write-plaintext-only;

-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类还有个办法，不使用a或者input标签，直接用div标签

附上出处链接：http://www.cnblogs.com/PeunZhang/p/3407453.html

在HTML中 怎么去掉点击select时的虚线边框，求大神指点下？

垃圾前排答案，看劳资来答。

1、设置outline: none;谷歌浏览器搞定；

2、解决火狐设置outline: none;依然有虚线字体颜色框的问题：

思路：用阴影来替换文本，只针对火狐

select:-moz-focusring

color: transparent;

text-shadow: 0 0 0 #000;

非原创，Stack Overflow找到的答案，原链接：去除火狐select虚线边框

能fq的直接点链接吧

参考技术A 一般我们点击超链接的时候都会有一条虚线边框，有时候用text-indent:-999px来隐藏字体的时候，哪个边框就很长了,所以我们就会想到去掉这个边框，请看下面方法

IE浏览器：
a
blr:expression(this.onFocus=this.blur());


FF浏览器：
a
outline: none;

或者缩小范围：
a:focus
outline: none;

后者使得鼠标左键在链接上按下，松开之前的这段时间里，仍会显示虚线的outline.追问

这个不是a标签啊，这select标签 在火狐浏览器会出现这种情况 其他的都正常