What is -webkit-focus-ring-color?
I want to reproduce the outline effect for focused input boxes in webkit to non-webkit browsers. I found here the default CSS used in webkit. The lines of interest are:
:focus {
outline: auto 5px -webkit-focus-ring-color
}
I tried making a search in the whole code for the definition -webkit-focus-ring-color here but could not find it anywhere.
css webkit
asked Sep 24 '11 at 11:41
RandomblueRandomblue
35.9k119286504
add a comment |
I want to reproduce the outline effect for focused input boxes in webkit to non-webkit browsers. I found here the default CSS used in webkit. The lines of interest are:
:focus {
outline: auto 5px -webkit-focus-ring-color
}
I tried making a search in the whole code for the definition -webkit-focus-ring-color here but could not find it anywhere.
css webkit
asked Sep 24 '11 at 11:41
RandomblueRandomblue
35.9k119286504
1
Well, the "focus ring" is a rounded gradient which as far as I know of cannot be defined in outline. It looks more like a box-shadow to me. That's how I would personally recreate the effect with something likebox-shadow: 0 0 2px <color>
– Tyler Crompton
Sep 24 '11 at 15:17
1
IT also depends on the the user's preferences. On a Mac, it will be either blue or graphite and on a PC, it will be a goldenrod color.
– Tyler Crompton
Sep 24 '11 at 15:26
Use Chrome DevTools. Force element's focus state and see for yourself.
– x-yuri
Oct 10 '17 at 22:07
add a comment |
I want to reproduce the outline effect for focused input boxes in webkit to non-webkit browsers. I found here the default CSS used in webkit. The lines of interest are:
:focus {
outline: auto 5px -webkit-focus-ring-color
}
I tried making a search in the whole code for the definition -webkit-focus-ring-color here but could not find it anywhere.
css webkit
asked Sep 24 '11 at 11:41
RandomblueRandomblue
35.9k119286504
I want to reproduce the outline effect for focused input boxes in webkit to non-webkit browsers. I found here the default CSS used in webkit. The lines of interest are:
:focus {
outline: auto 5px -webkit-focus-ring-color
}
I tried making a search in the whole code for the definition -webkit-focus-ring-color here but could not find it anywhere.
css webkit
css webkit
asked Sep 24 '11 at 11:41
RandomblueRandomblue
35.9k119286504
asked Sep 24 '11 at 11:41
RandomblueRandomblue
35.9k119286504
asked Sep 24 '11 at 11:41
RandomblueRandomblue
35.9k119286504
asked Sep 24 '11 at 11:41
RandomblueRandomblue
35.9k119286504
asked Sep 24 '11 at 11:41
RandomblueRandomblue
35.9k119286504
35.9k119286504
1
Well, the "focus ring" is a rounded gradient which as far as I know of cannot be defined in outline. It looks more like a box-shadow to me. That's how I would personally recreate the effect with something likebox-shadow: 0 0 2px <color>
– Tyler Crompton
Sep 24 '11 at 15:17
1
IT also depends on the the user's preferences. On a Mac, it will be either blue or graphite and on a PC, it will be a goldenrod color.
– Tyler Crompton
Sep 24 '11 at 15:26
Use Chrome DevTools. Force element's focus state and see for yourself.
– x-yuri
Oct 10 '17 at 22:07
add a comment |
1
Well, the "focus ring" is a rounded gradient which as far as I know of cannot be defined in outline. It looks more like a box-shadow to me. That's how I would personally recreate the effect with something likebox-shadow: 0 0 2px <color>
– Tyler Crompton
Sep 24 '11 at 15:17
1
IT also depends on the the user's preferences. On a Mac, it will be either blue or graphite and on a PC, it will be a goldenrod color.
– Tyler Crompton
Sep 24 '11 at 15:26
Use Chrome DevTools. Force element's focus state and see for yourself.
– x-yuri
Oct 10 '17 at 22:07
1
1
Well, the "focus ring" is a rounded gradient which as far as I know of cannot be defined in outline. It looks more like a box-shadow to me. That's how I would personally recreate the effect with something like
box-shadow: 0 0 2px <color>– Tyler Crompton
Sep 24 '11 at 15:17
Well, the "focus ring" is a rounded gradient which as far as I know of cannot be defined in outline. It looks more like a box-shadow to me. That's how I would personally recreate the effect with something like
box-shadow: 0 0 2px <color>– Tyler Crompton
Sep 24 '11 at 15:17
1
1
IT also depends on the the user's preferences. On a Mac, it will be either blue or graphite and on a PC, it will be a goldenrod color.
– Tyler Crompton
Sep 24 '11 at 15:26
IT also depends on the the user's preferences. On a Mac, it will be either blue or graphite and on a PC, it will be a goldenrod color.
– Tyler Crompton
Sep 24 '11 at 15:26
Use Chrome DevTools. Force element's focus state and see for yourself.
– x-yuri
Oct 10 '17 at 22:07
Use Chrome DevTools. Force element's focus state and see for yourself.
– x-yuri
Oct 10 '17 at 22:07
add a comment |
4 Answers
4
active
oldest
votes
-webkit-focus-ring-color is defined in the WebKit codebase as focusRingColor in each RenderTheme class. That work was performed in June 2009 as part of this changeset by Jeremy Moskovich.
For instance, the default Mac theme (used by Safari) defines the colour in RenderThemeMac.mm (in a roundabout way) as:
[NSColor keyboardFocusIndicatorColor]
(Apple's very light documentation of that property is available online).
There is an override value for the Mac (called WebCore::oldAquaFocusRingColor) to be used for testing (near as I can tell it's for the code to be able to perform comparison between the browser rendering and a reference graphic; it is toggled using WebCore::usesTestModeFocusRingColor). It's defined in ColorMac.mm as the following (which apparently maps to Color(125, 173, 217)):
0xFF7DADD9
Chromium/Chrome defines the colour in RenderThemeChromiumSkia.cpp as:
Color(229, 151, 0, 255)
The default colour (specified in RenderTheme.h) is pure black:
Color(0, 0, 0)
answered Aug 13 '12 at 7:23
Kit GroseKit Grose
1,3431413
add a comment |
Use this jsFiddle. I got rgb(229, 151, 0) in Chrome 14 on Windows 7.
answered Sep 24 '11 at 15:33
Tyler CromptonTyler Crompton
8,28095385
5
I gotrgb(94, 158, 214)in Chrome 14 on Mac OS X. Lol.
– Randomblue
Sep 24 '11 at 16:03
1
Well, yeah, Mac input fields by default are a blue color. You can change it to graphite. But on Windows (and I think Ubuntu as well), the outline is gold. I believe the gold color is Webkit's default color and I think Macs override that (but I may be incorrect about that). Did this answer your question? (By the way, in Chrome 12 on Mac OS 10.6, I gotrgb(97, 157, 215).)
– Tyler Crompton
Sep 25 '11 at 17:44
And on Macs, the outline is a gradient and others it is not.
– Tyler Crompton
Sep 25 '11 at 17:49
1
rgb(59, 153, 252)in the current version.
– Chuck Le Butt
Dec 18 '15 at 16:35
add a comment |
Edit: As @chharvey notes, Highlight is now a deprecated system color, so disregard this answer.
-webkit-focus-ring-color does not work in Firefox. You can use the system color Highlight as a replacement though.
:focus {
outline: auto 2px Highlight;
outline: auto 5px -webkit-focus-ring-color;
}
Also see this site on why resetting outline styles is usually a bad idea.
answered Jul 25 '16 at 14:56
psanikopsaniko
5011413
1
Thanks, it's annoying when Bootstrap resetoutlineby default. I wish I could simply useoutline: inherit/initialto re-reset it.
– Tien Do
Dec 21 '16 at 11:16
I agree with Bootstrap resetting it being annoying... which is why we then have to try to "un-"reset it to bring it back to as close to the browser default as we can, because you cannot un-reset something once it's set. I was also hoping initial/inherit would have worked, but neither does.
– Keith D Commiskey
Jan 22 '17 at 4:57
3
regarding system colors: “Authors must not use these keywords.”
– chharvey
Dec 7 '17 at 8:16
add a comment |
FWIW:
Using Chrome on a Mac, I get a blue outline color when using normal browser mode. When I use the device view, I get a yellow/golden outline color.
Not sure why it changes - was actually very confusing. See examples below.
answered Jul 19 '16 at 17:46
FedericoFederico
4,09032741
Yes, that's true.
– Luigi Lopez
Jul 26 '17 at 2:39
Thank you Federico, I thought I was going crazy.
– aaaidan
Jul 16 '18 at 22:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f7538771%2fwhat-is-webkit-focus-ring-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
-webkit-focus-ring-color is defined in the WebKit codebase as focusRingColor in each RenderTheme class. That work was performed in June 2009 as part of this changeset by Jeremy Moskovich.
For instance, the default Mac theme (used by Safari) defines the colour in RenderThemeMac.mm (in a roundabout way) as:
[NSColor keyboardFocusIndicatorColor]
(Apple's very light documentation of that property is available online).
There is an override value for the Mac (called WebCore::oldAquaFocusRingColor) to be used for testing (near as I can tell it's for the code to be able to perform comparison between the browser rendering and a reference graphic; it is toggled using WebCore::usesTestModeFocusRingColor). It's defined in ColorMac.mm as the following (which apparently maps to Color(125, 173, 217)):
0xFF7DADD9
Chromium/Chrome defines the colour in RenderThemeChromiumSkia.cpp as:
Color(229, 151, 0, 255)
The default colour (specified in RenderTheme.h) is pure black:
Color(0, 0, 0)
answered Aug 13 '12 at 7:23
Kit GroseKit Grose
1,3431413
add a comment |
-webkit-focus-ring-color is defined in the WebKit codebase as focusRingColor in each RenderTheme class. That work was performed in June 2009 as part of this changeset by Jeremy Moskovich.
For instance, the default Mac theme (used by Safari) defines the colour in RenderThemeMac.mm (in a roundabout way) as:
[NSColor keyboardFocusIndicatorColor]
(Apple's very light documentation of that property is available online).
There is an override value for the Mac (called WebCore::oldAquaFocusRingColor) to be used for testing (near as I can tell it's for the code to be able to perform comparison between the browser rendering and a reference graphic; it is toggled using WebCore::usesTestModeFocusRingColor). It's defined in ColorMac.mm as the following (which apparently maps to Color(125, 173, 217)):
0xFF7DADD9
Chromium/Chrome defines the colour in RenderThemeChromiumSkia.cpp as:
Color(229, 151, 0, 255)
The default colour (specified in RenderTheme.h) is pure black:
Color(0, 0, 0)
answered Aug 13 '12 at 7:23
Kit GroseKit Grose
1,3431413
add a comment |
-webkit-focus-ring-color is defined in the WebKit codebase as focusRingColor in each RenderTheme class. That work was performed in June 2009 as part of this changeset by Jeremy Moskovich.
For instance, the default Mac theme (used by Safari) defines the colour in RenderThemeMac.mm (in a roundabout way) as:
[NSColor keyboardFocusIndicatorColor]
(Apple's very light documentation of that property is available online).
There is an override value for the Mac (called WebCore::oldAquaFocusRingColor) to be used for testing (near as I can tell it's for the code to be able to perform comparison between the browser rendering and a reference graphic; it is toggled using WebCore::usesTestModeFocusRingColor). It's defined in ColorMac.mm as the following (which apparently maps to Color(125, 173, 217)):
0xFF7DADD9
Chromium/Chrome defines the colour in RenderThemeChromiumSkia.cpp as:
Color(229, 151, 0, 255)
The default colour (specified in RenderTheme.h) is pure black:
Color(0, 0, 0)
answered Aug 13 '12 at 7:23
Kit GroseKit Grose
1,3431413
-webkit-focus-ring-color is defined in the WebKit codebase as focusRingColor in each RenderTheme class. That work was performed in June 2009 as part of this changeset by Jeremy Moskovich.
For instance, the default Mac theme (used by Safari) defines the colour in RenderThemeMac.mm (in a roundabout way) as:
[NSColor keyboardFocusIndicatorColor]
(Apple's very light documentation of that property is available online).
There is an override value for the Mac (called WebCore::oldAquaFocusRingColor) to be used for testing (near as I can tell it's for the code to be able to perform comparison between the browser rendering and a reference graphic; it is toggled using WebCore::usesTestModeFocusRingColor). It's defined in ColorMac.mm as the following (which apparently maps to Color(125, 173, 217)):
0xFF7DADD9
Chromium/Chrome defines the colour in RenderThemeChromiumSkia.cpp as:
Color(229, 151, 0, 255)
The default colour (specified in RenderTheme.h) is pure black:
Color(0, 0, 0)
answered Aug 13 '12 at 7:23
Kit GroseKit Grose
1,3431413
answered Aug 13 '12 at 7:23
Kit GroseKit Grose
1,3431413
answered Aug 13 '12 at 7:23
Kit GroseKit Grose
1,3431413
answered Aug 13 '12 at 7:23
Kit GroseKit Grose
1,3431413
1,3431413
add a comment |
add a comment |
Use this jsFiddle. I got rgb(229, 151, 0) in Chrome 14 on Windows 7.
answered Sep 24 '11 at 15:33
Tyler CromptonTyler Crompton
8,28095385
5
I gotrgb(94, 158, 214)in Chrome 14 on Mac OS X. Lol.
– Randomblue
Sep 24 '11 at 16:03
1
Well, yeah, Mac input fields by default are a blue color. You can change it to graphite. But on Windows (and I think Ubuntu as well), the outline is gold. I believe the gold color is Webkit's default color and I think Macs override that (but I may be incorrect about that). Did this answer your question? (By the way, in Chrome 12 on Mac OS 10.6, I gotrgb(97, 157, 215).)
– Tyler Crompton
Sep 25 '11 at 17:44
And on Macs, the outline is a gradient and others it is not.
– Tyler Crompton
Sep 25 '11 at 17:49
1
rgb(59, 153, 252)in the current version.
– Chuck Le Butt
Dec 18 '15 at 16:35
add a comment |
Use this jsFiddle. I got rgb(229, 151, 0) in Chrome 14 on Windows 7.
answered Sep 24 '11 at 15:33
Tyler CromptonTyler Crompton
8,28095385
5
I gotrgb(94, 158, 214)in Chrome 14 on Mac OS X. Lol.
– Randomblue
Sep 24 '11 at 16:03
1
Well, yeah, Mac input fields by default are a blue color. You can change it to graphite. But on Windows (and I think Ubuntu as well), the outline is gold. I believe the gold color is Webkit's default color and I think Macs override that (but I may be incorrect about that). Did this answer your question? (By the way, in Chrome 12 on Mac OS 10.6, I gotrgb(97, 157, 215).)
– Tyler Crompton
Sep 25 '11 at 17:44
And on Macs, the outline is a gradient and others it is not.
– Tyler Crompton
Sep 25 '11 at 17:49
1
rgb(59, 153, 252)in the current version.
– Chuck Le Butt
Dec 18 '15 at 16:35
add a comment |
Use this jsFiddle. I got rgb(229, 151, 0) in Chrome 14 on Windows 7.
answered Sep 24 '11 at 15:33
Tyler CromptonTyler Crompton
8,28095385
Use this jsFiddle. I got rgb(229, 151, 0) in Chrome 14 on Windows 7.
answered Sep 24 '11 at 15:33
Tyler CromptonTyler Crompton
8,28095385
answered Sep 24 '11 at 15:33
Tyler CromptonTyler Crompton
8,28095385
answered Sep 24 '11 at 15:33
Tyler CromptonTyler Crompton
8,28095385
answered Sep 24 '11 at 15:33
Tyler CromptonTyler Crompton
8,28095385
8,28095385
5
I gotrgb(94, 158, 214)in Chrome 14 on Mac OS X. Lol.
– Randomblue
Sep 24 '11 at 16:03
1
Well, yeah, Mac input fields by default are a blue color. You can change it to graphite. But on Windows (and I think Ubuntu as well), the outline is gold. I believe the gold color is Webkit's default color and I think Macs override that (but I may be incorrect about that). Did this answer your question? (By the way, in Chrome 12 on Mac OS 10.6, I gotrgb(97, 157, 215).)
– Tyler Crompton
Sep 25 '11 at 17:44
And on Macs, the outline is a gradient and others it is not.
– Tyler Crompton
Sep 25 '11 at 17:49
1
rgb(59, 153, 252)in the current version.
– Chuck Le Butt
Dec 18 '15 at 16:35
add a comment |
5
I gotrgb(94, 158, 214)in Chrome 14 on Mac OS X. Lol.
– Randomblue
Sep 24 '11 at 16:03
1
Well, yeah, Mac input fields by default are a blue color. You can change it to graphite. But on Windows (and I think Ubuntu as well), the outline is gold. I believe the gold color is Webkit's default color and I think Macs override that (but I may be incorrect about that). Did this answer your question? (By the way, in Chrome 12 on Mac OS 10.6, I gotrgb(97, 157, 215).)
– Tyler Crompton
Sep 25 '11 at 17:44
And on Macs, the outline is a gradient and others it is not.
– Tyler Crompton
Sep 25 '11 at 17:49
1
rgb(59, 153, 252)in the current version.
– Chuck Le Butt
Dec 18 '15 at 16:35
5
5
I got
rgb(94, 158, 214) in Chrome 14 on Mac OS X. Lol.– Randomblue
Sep 24 '11 at 16:03
I got
rgb(94, 158, 214) in Chrome 14 on Mac OS X. Lol.– Randomblue
Sep 24 '11 at 16:03
1
1
Well, yeah, Mac input fields by default are a blue color. You can change it to graphite. But on Windows (and I think Ubuntu as well), the outline is gold. I believe the gold color is Webkit's default color and I think Macs override that (but I may be incorrect about that). Did this answer your question? (By the way, in Chrome 12 on Mac OS 10.6, I got
rgb(97, 157, 215).)– Tyler Crompton
Sep 25 '11 at 17:44
Well, yeah, Mac input fields by default are a blue color. You can change it to graphite. But on Windows (and I think Ubuntu as well), the outline is gold. I believe the gold color is Webkit's default color and I think Macs override that (but I may be incorrect about that). Did this answer your question? (By the way, in Chrome 12 on Mac OS 10.6, I got
rgb(97, 157, 215).)– Tyler Crompton
Sep 25 '11 at 17:44
And on Macs, the outline is a gradient and others it is not.
– Tyler Crompton
Sep 25 '11 at 17:49
And on Macs, the outline is a gradient and others it is not.
– Tyler Crompton
Sep 25 '11 at 17:49
1
1
rgb(59, 153, 252) in the current version.– Chuck Le Butt
Dec 18 '15 at 16:35
rgb(59, 153, 252) in the current version.– Chuck Le Butt
Dec 18 '15 at 16:35
add a comment |
Edit: As @chharvey notes, Highlight is now a deprecated system color, so disregard this answer.
-webkit-focus-ring-color does not work in Firefox. You can use the system color Highlight as a replacement though.
:focus {
outline: auto 2px Highlight;
outline: auto 5px -webkit-focus-ring-color;
}
Also see this site on why resetting outline styles is usually a bad idea.
answered Jul 25 '16 at 14:56
psanikopsaniko
5011413
1
Thanks, it's annoying when Bootstrap resetoutlineby default. I wish I could simply useoutline: inherit/initialto re-reset it.
– Tien Do
Dec 21 '16 at 11:16
I agree with Bootstrap resetting it being annoying... which is why we then have to try to "un-"reset it to bring it back to as close to the browser default as we can, because you cannot un-reset something once it's set. I was also hoping initial/inherit would have worked, but neither does.
– Keith D Commiskey
Jan 22 '17 at 4:57
3
regarding system colors: “Authors must not use these keywords.”
– chharvey
Dec 7 '17 at 8:16
add a comment |
Edit: As @chharvey notes, Highlight is now a deprecated system color, so disregard this answer.
-webkit-focus-ring-color does not work in Firefox. You can use the system color Highlight as a replacement though.
:focus {
outline: auto 2px Highlight;
outline: auto 5px -webkit-focus-ring-color;
}
Also see this site on why resetting outline styles is usually a bad idea.
answered Jul 25 '16 at 14:56
psanikopsaniko
5011413
1
Thanks, it's annoying when Bootstrap resetoutlineby default. I wish I could simply useoutline: inherit/initialto re-reset it.
– Tien Do
Dec 21 '16 at 11:16
I agree with Bootstrap resetting it being annoying... which is why we then have to try to "un-"reset it to bring it back to as close to the browser default as we can, because you cannot un-reset something once it's set. I was also hoping initial/inherit would have worked, but neither does.
– Keith D Commiskey
Jan 22 '17 at 4:57
3
regarding system colors: “Authors must not use these keywords.”
– chharvey
Dec 7 '17 at 8:16
add a comment |
Edit: As @chharvey notes, Highlight is now a deprecated system color, so disregard this answer.
-webkit-focus-ring-color does not work in Firefox. You can use the system color Highlight as a replacement though.
:focus {
outline: auto 2px Highlight;
outline: auto 5px -webkit-focus-ring-color;
}
Also see this site on why resetting outline styles is usually a bad idea.
answered Jul 25 '16 at 14:56
psanikopsaniko
5011413
Edit: As @chharvey notes, Highlight is now a deprecated system color, so disregard this answer.
-webkit-focus-ring-color does not work in Firefox. You can use the system color Highlight as a replacement though.
:focus {
outline: auto 2px Highlight;
outline: auto 5px -webkit-focus-ring-color;
}
Also see this site on why resetting outline styles is usually a bad idea.
answered Jul 25 '16 at 14:56
psanikopsaniko
5011413
edited Nov 27 '18 at 1:18
answered Jul 25 '16 at 14:56
psanikopsaniko
5011413
answered Jul 25 '16 at 14:56
psanikopsaniko
5011413
answered Jul 25 '16 at 14:56
psanikopsaniko
5011413
5011413
1
Thanks, it's annoying when Bootstrap resetoutlineby default. I wish I could simply useoutline: inherit/initialto re-reset it.
– Tien Do
Dec 21 '16 at 11:16
I agree with Bootstrap resetting it being annoying... which is why we then have to try to "un-"reset it to bring it back to as close to the browser default as we can, because you cannot un-reset something once it's set. I was also hoping initial/inherit would have worked, but neither does.
– Keith D Commiskey
Jan 22 '17 at 4:57
3
regarding system colors: “Authors must not use these keywords.”
– chharvey
Dec 7 '17 at 8:16
add a comment |
1
Thanks, it's annoying when Bootstrap resetoutlineby default. I wish I could simply useoutline: inherit/initialto re-reset it.
– Tien Do
Dec 21 '16 at 11:16
I agree with Bootstrap resetting it being annoying... which is why we then have to try to "un-"reset it to bring it back to as close to the browser default as we can, because you cannot un-reset something once it's set. I was also hoping initial/inherit would have worked, but neither does.
– Keith D Commiskey
Jan 22 '17 at 4:57
3
regarding system colors: “Authors must not use these keywords.”
– chharvey
Dec 7 '17 at 8:16
1
1
Thanks, it's annoying when Bootstrap reset
outline by default. I wish I could simply use outline: inherit/initial to re-reset it.– Tien Do
Dec 21 '16 at 11:16
Thanks, it's annoying when Bootstrap reset
outline by default. I wish I could simply use outline: inherit/initial to re-reset it.– Tien Do
Dec 21 '16 at 11:16
I agree with Bootstrap resetting it being annoying... which is why we then have to try to "un-"reset it to bring it back to as close to the browser default as we can, because you cannot un-reset something once it's set. I was also hoping initial/inherit would have worked, but neither does.
– Keith D Commiskey
Jan 22 '17 at 4:57
I agree with Bootstrap resetting it being annoying... which is why we then have to try to "un-"reset it to bring it back to as close to the browser default as we can, because you cannot un-reset something once it's set. I was also hoping initial/inherit would have worked, but neither does.
– Keith D Commiskey
Jan 22 '17 at 4:57
3
3
regarding system colors: “Authors must not use these keywords.”
– chharvey
Dec 7 '17 at 8:16
regarding system colors: “Authors must not use these keywords.”
– chharvey
Dec 7 '17 at 8:16
add a comment |
FWIW:
Using Chrome on a Mac, I get a blue outline color when using normal browser mode. When I use the device view, I get a yellow/golden outline color.
Not sure why it changes - was actually very confusing. See examples below.
answered Jul 19 '16 at 17:46
FedericoFederico
4,09032741
Yes, that's true.
– Luigi Lopez
Jul 26 '17 at 2:39
Thank you Federico, I thought I was going crazy.
– aaaidan
Jul 16 '18 at 22:41
add a comment |
FWIW:
Using Chrome on a Mac, I get a blue outline color when using normal browser mode. When I use the device view, I get a yellow/golden outline color.
Not sure why it changes - was actually very confusing. See examples below.
answered Jul 19 '16 at 17:46
FedericoFederico
4,09032741
Yes, that's true.
– Luigi Lopez
Jul 26 '17 at 2:39
Thank you Federico, I thought I was going crazy.
– aaaidan
Jul 16 '18 at 22:41
add a comment |
FWIW:
Using Chrome on a Mac, I get a blue outline color when using normal browser mode. When I use the device view, I get a yellow/golden outline color.
Not sure why it changes - was actually very confusing. See examples below.
answered Jul 19 '16 at 17:46
FedericoFederico
4,09032741
FWIW:
Using Chrome on a Mac, I get a blue outline color when using normal browser mode. When I use the device view, I get a yellow/golden outline color.
Not sure why it changes - was actually very confusing. See examples below.
answered Jul 19 '16 at 17:46
FedericoFederico
4,09032741
answered Jul 19 '16 at 17:46
FedericoFederico
4,09032741
answered Jul 19 '16 at 17:46
FedericoFederico
4,09032741
answered Jul 19 '16 at 17:46
FedericoFederico
4,09032741
4,09032741
Yes, that's true.
– Luigi Lopez
Jul 26 '17 at 2:39
Thank you Federico, I thought I was going crazy.
– aaaidan
Jul 16 '18 at 22:41
add a comment |
Yes, that's true.
– Luigi Lopez
Jul 26 '17 at 2:39
Thank you Federico, I thought I was going crazy.
– aaaidan
Jul 16 '18 at 22:41
Yes, that's true.
– Luigi Lopez
Jul 26 '17 at 2:39
Yes, that's true.
– Luigi Lopez
Jul 26 '17 at 2:39
Thank you Federico, I thought I was going crazy.
– aaaidan
Jul 16 '18 at 22:41
Thank you Federico, I thought I was going crazy.
– aaaidan
Jul 16 '18 at 22:41
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f7538771%2fwhat-is-webkit-focus-ring-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Well, the "focus ring" is a rounded gradient which as far as I know of cannot be defined in outline. It looks more like a box-shadow to me. That's how I would personally recreate the effect with something like
box-shadow: 0 0 2px <color>– Tyler Crompton
Sep 24 '11 at 15:17
1
IT also depends on the the user's preferences. On a Mac, it will be either blue or graphite and on a PC, it will be a goldenrod color.
– Tyler Crompton
Sep 24 '11 at 15:26
Use Chrome DevTools. Force element's focus state and see for yourself.
– x-yuri
Oct 10 '17 at 22:07