CSS - -webkit-tap-highlight-color

Syntax  

-webkit-tap-highlight-color: red;

Values

A <color value>.

Formal syntax

<a title="" href="css/color_value"><color></a><p>where <br><code><color> = <a href="css/-webkit-tap-highlight-color#rgb()"><rgb()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-tap-highlight-color#rgba()"><rgba()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-tap-highlight-color#hsl()"><hsl()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-tap-highlight-color#hsla()"><hsla()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <hex-color> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-tap-highlight-color#named-color"><named-color></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> currentcolor <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-tap-highlight-color#deprecated-system-color"><deprecated-system-color></a></code></p><p>where <br><code><rgb()> = rgb( <a href="css/-webkit-tap-highlight-color#rgb-component"><rgb-component></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>3<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a> )<br><rgba()> = rgba( <a href="css/-webkit-tap-highlight-color#rgb-component"><rgb-component></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>3<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a> , <a href="css/-webkit-tap-highlight-color#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/-webkit-tap-highlight-color#hue"><hue></a>, <a title="" href="css/percentage"><percentage></a>, <a title="" href="css/percentage"><percentage></a> )<br><hsla()> = hsla( <a href="css/-webkit-tap-highlight-color#hue"><hue></a>, <a title="" href="css/percentage"><percentage></a>, <a title="" href="css/percentage"><percentage></a>, <a href="css/-webkit-tap-highlight-color#alpha-value"><alpha-value></a> )<br><named-color> = <ident><br><deprecated-system-color> = ActiveBorder <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ActiveCaption <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> AppWorkspace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Background <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonFace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonHighlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> CaptionText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> GrayText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Highlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> HighlightText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveBorder <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveCaption <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveCaptionText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InfoBackground <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InfoText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Menu <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> MenuText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Scrollbar <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDDarkShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDFace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDHighlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDLightShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Window <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> WindowFrame <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> WindowText</code></p><p>where <br><code><rgb-component> = <a title="" href="css/integer"><integer></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/percentage"><percentage></a><br><alpha-value> = <a title="" href="css/number"><number></a><br><hue> = <a title="" href="css/number"><number></a></code></p>

Description  

-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.

Browser Compatibility  

Supported by WebKit/Safari, Blink/Chrome, and some versions of Internet Explorer and Microsoft Edge.

Specifications  

Not part of any specification. Apple has a description in the Safari Web Content Guide.

License