safari css_使用CSS更改Mobile Safari突出显示颜色

safari css

I love the amount of extra customization afforded to us by WebKit. That also makes me love the fact that, for the most part, WebKit Mobile is the choice renderer used by mobile devices. One rarely used style property is -webkit-tap-highlight-color, which allows developers to change the default tap highlight color. Here's how to use it!

我很喜欢WebKit为我们提供的额外定制功能。 这也使我喜欢这样一个事实，在大多数情况下，WebKit Mobile是移动设备使用的首选渲染器。 一种很少使用的样式属性是-webkit-tap-highlight-color ，它允许开发人员更改默认的分接突出显示颜色。 这是使用方法！

CSS (The CSS)

/* light blue at 80% opacity */
html {
	-webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);
}

/* change it for a div that has a similar background-color to the light blue tap color */
.blueDiv {
	-webkit-tap-highlight-color: rgba(251, 185, 250, 0.9);
}

Changing the -webkit-tap-highlight-color property value is the key! Also note that using RGBA color allows the extra dimension opacity for the highlight so that the color isn't so harsh.

更改-webkit-tap-highlight-color属性值是关键！ 还要注意，使用RGBA颜色可以使高光具有额外的尺寸不透明性，因此颜色不会太粗糙。

In the case that you have an element which you'd prefer wasn't highlighted at all, you would code:

如果您的首选元素根本没有突出显示，则可以编写以下代码：

.myButton {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

-webkit-tap-highlight-color obviously isn't a crucial property to change with each site but it's nice to have the ability to change the tap color, especially if you're using dark-colored backgrounds.

-webkit-tap-highlight-color显然不是每个站点更改的关键属性，但是具有更改点击颜色的功能非常好，尤其是在使用深色背景的情况下。

翻译自: https://davidwalsh.name/mobile-highlight-color

safari css