CSS Override defaults: -webkit-focus-ring-color

Browsers and operating systems have become smarter and more developer and user friendly these days.

In the context of front end UI development, you might have seen the glossy border and outlines in the input fields turning blue (on windows) when you focus on it. This is default behaviour and uses the -webkit-focus-ring-color on the CSS3 focus pseudo class.

:focus {
outline: -webkit-focus-ring-color auto 5px;
}

This -webkit-focus-ring-color is computed as outline-color: rgb(77, 144, 254)  or (#4d90fe) on my windows 8 browser. But depending on the operating systems or browsers used, this may be computed differently (mac-either graphite or blue).

You should be able to override this default focus color by simple overriding the on focus style for the inputs in question.

SCSS styles:

input[type=”text”], input[type=”email”], input[type=”password”] {
&:focus {
outline: none;
border-color: grey;
box-shadow: 0 0 3px grey;
}
}

or add a solid line by overriding css outline attribute:

input[type=”text”], input[type=”email”], input[type=”password”] {
&:focus {
outline-color: grey;
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;
}
}

Use the below jQuery to get the default ring focus color as represented in your system:

jQuery(document).ready(function () {
jQuery(‘input’).click(function () {
document.write(jQuery(‘input’).css(‘outline-color’));
});
});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s