css - 移动端HTML radio关联label后，切换时为什么会有一个蓝色的图层一闪而过？
本文介绍了css - 移动端HTML radio关联label后，切换时为什么会有一个蓝色的图层一闪而过？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
问题如图所示：
点击切换时为什么会出现一个淡蓝色图层？怎么去掉啊？
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: rgb(80, 87, 106);
display: inline-block;
cursor: pointer;
padding: 5px 20px;
}
input[type=radio]:checked+label {
color: white;
background: rgb(80, 87, 106);
}
label+input[type=radio]+label {
border-left: solid 1px rgb(80, 87, 106);
}
.radio-group {
border: solid 1px rgb(80, 87, 106);
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="radio-group">
<input type="radio" id="option-one" name="selector"><label for="option-one">AAA</label><input type="radio" id="option-two" name="selector"><label for="option-two">BBB</label><input type="radio" id="option-three" name="selector"><label for="option-three">CCC</label>
</div>
</body>
</html>
解决方案
*{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}chrome内核对于点击前有一个tap的高亮，上面就是将高亮变为白色。
这篇关于css - 移动端HTML radio关联label后，切换时为什么会有一个蓝色的图层一闪而过？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
