Path: csiph.com!news.mixmin.net!news.albasani.net!.POSTED!not-for-mail
From: James Kirk <noneya.invalid@gmail.com>
Newsgroups: comp.lang.javascript,comp.infosystems.www.authoring.stylesheets
Subject: Re: Outline color invert
Followup-To: comp.infosystems.www.authoring.stylesheets
Date: Sun, 8 Jul 2018 09:47:26 -0400
Organization: Time Travel Tracing
Lines: 28
Message-ID: <20180708094726.00004d35@james.kirk.invalid>
References: <NK2dnc0iw8hmRtzGnZ2dnUU7-YXNnZ2d@westnet.com.au>
Reply-To: : James Kirk <noneya.invalid+knobknocker@gmail.com>
Mime-Version: 1.0
Content-Type: text/plain; charset=US-ASCII
Content-Transfer-Encoding: 7bit
X-Trace: news.albasani.net 9Tr8wwpGVyreyKliAfVkzNdkP4+MA3D6Ma2YqtaZ+BYfC5VOyIghusR7jh+a4kdQAnhI53YMZ77MVy4pZIYd1lowTXFFu3fFRPMqGnUw+OV+lhWCoyGx8nybiboEp4Op
NNTP-Posting-Date: Sun, 8 Jul 2018 13:47:26 +0000 (UTC)
Injection-Info: news.albasani.net; logging-data="zJp044BTyY+XCzb2WBORgLzUsizSSXQmczO3YO6tidJNIKkyu8nQsn7EdBLFrm3+W++lSbicCYqVWTuEaLbLaE66G96BN3xKZTfbjby6UjPWygaYDyofOUdN0t5csnyqpJi9vSPDv3sxzRUrXm2FBd11b6MHSrFAnhvK9Pj5334="; mail-complaints-to="abuse@albasani.net"
User-Agent: Unicorn named Ellie
In-Reply-To: <NK2dnc0iw8hmRtzGnZ2dnUU7-YXNnZ2d@westnet.com.au>
X-Newsreader: Microsoft Windows Dead Mail Original Imitation Prototype
Content-Language: en-US
X-Operating-System: Windows 3.0
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QIHFgQpyK6L9AAAAEJQTFRFAAAAQAAAQEAAQEBAQECAgEBAgECAgIBAgICAgIC/gL+/v4BAv4CAv4C/v7+Av7+/v7//v////7+A/7+///+/////CTpitwAAAAF0Uk5TAEDm2GYAAAABYktHRBXl2PmjAAAB6klEQVRIx61Vi3KEIAz0pJZYUwIi//+r3QT78sTKTDM3N6e3y+5iIsPwT+UcdeHJOSd9Ao6kVyB2CqQkfQKpSI+AS6lDQh2VDoIzR6jYQVCBuymo7tH9EF+OUrwnAfxLFSjp/aajuZTbnujbUYop/dWz7P1kDyFWS4lYLuETyrs5VUKMSTyHthvFe/ZwFD8tRQ68SNvOxFlGh8hFl48oCoF9aOC9l23jB6n5GMHBR1gZfI7nvG2bf0hUL2YLNCWwf3Ilnip+Q2cX86+G8FM9MU/PgcmHDIaMZG6wflGKegLhyZQn4oxCBKlxTaHGBmHxz45ECRkRFFpX1+9UCQdPzHikRtBRiD8rzacEQjbFh5HKjixSzJco/kgQomyM5THvAoKFxXaLzgj40wj2FNSI2NW7pdbM/ritlbBOLu3rm0EnshOO3cHIAEZAIwG949ewvOqFX467ahIIsfJIltN2bF1XngQa/qxhWQkBEUTXzJWAGzCFKeKzaVDGpJllNwR84IlEiM/nIWRG54ERKrwSIDE3Jg57O7ooiVetYIX5o9gca2KcOzAUdnRtbEhcvMKAp/CrriTsoCKM2JenPAwzbr5dKWgYxUr+PoEvCCfq1DyBIf4iPYc8NQ5naUlQeynqJLRf9Z2E4cb58QHWYi4v2VmiigAAAABJRU5ErkJggg==
Cancel-Lock: sha1:SjAN0Hp7WIye85EHF06BScnrBPo=
Xref: csiph.com comp.lang.javascript:35388 comp.infosystems.www.authoring.stylesheets:7886

In-Reply-To: <NK2dnc0iw8hmRtzGnZ2dnUU7-YXNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

Followup-To: comp.infosystems.www.authoring.stylesheets

> I'm working on a site that requires keyboard navigation. This is
> easy enough to do using tabindex and role but the color of the
> outline on the focussed interactive element is (by default) blue.

Depends on the UA and or user modifications.

[snip]

> How can I change the color of the outline to something
> appropriate without knowing beforehand what the color of the
> background might be currently?

Consider alternatives to modifying the outline. Perhaps: box-shadow.
<https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow>

:focus {
	box-shadow: 0 0 1px 3px white;
}

Consider choosing a selector that would be more specific then :focus.

-- 
James Kirk