- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-23 10:00:43
tap-highlight-color
tap-highlight-color：<color>
默认值：由user agent决定
适用于：所有元素
继承性：有
动画性：是
计算值：指定值
设置或检索对象的轻按时高亮。
当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色
如果想取消这个高亮，将值设置为全透明即可，比如transparent
对应的脚本特性为textHighlightColor。
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0 | 6.0-8.0 | 15.0-29.0 | 6.0-8.3 -webkit- | 2.1-4.4.4 -webkit- | 18.0-42.0 -webkit- |
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<style>
.test {
display: block;
margin: 5px;
padding: 10px;
border: 1px solid #aaa;
-webkit-user-select: none;
}
.demo1 {
-webkit-tap-highlight-color: red;
}
.demo2 {
-webkit-tap-highlight-color: red;
}
</style>
</head>
<body>
<a href="#" class="test demo1">请在移动设备上查看本例</a>
<label class="test demo2"><input type="checkbox" />请在移动设备上查看本例</label>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
推荐手册