Focus style comparison

Compares the behaviour of different browsers when adding focus CSS styles.

by jamessouth

HTML

<h1>Focus style comparison</h1>

<p>IE11 will add focus styles to to the body and divs when selected on IE11 for Windows 8.1 and WP8. Click anywhere in the body to see this happen.</p>
<div>
    <p>Lorem īpsum dōlor sit amet, eæm ǽð cibo ēlectrǣm tōrquātos, mǽzim prodesseÞ posidoniūm eī est. Nam eu orætīo commune adversarium. Æssum exerci irǣcundia sēd iƿ, eÞ vim aðipīsci honestǣtis cotīðiēque, debēt oblīque dūo cu. Ūtroque rationiȝūs est ād. Rebum moderǣÞius dissēntīet cum eī, est ǽeterno sǣdīpsċīƿg repudiandae cu. No pri audiam noƿūmes æppēterē, usu ut graēci putēnt menændri, in dictǽ consul dissenÞiet dūo.</p>
</div>
<div>
    <p>Lorem īpsum dōlor sit amet, eæm ǽð cibo ēlectrǣm tōrquātos, mǽzim prodesseÞ posidoniūm eī est. Nam eu orætīo commune adversarium. Æssum exerci irǣcundia sēd iƿ, eÞ vim aðipīsci honestǣtis cotīðiēque, debēt oblīque dūo cu. Ūtroque rationiȝūs est ād. Rebum moderǣÞius dissēntīet cum eī, est ǽeterno sǣdīpsċīƿg repudiandae cu. No pri audiam noƿūmes æppēterē, usu ut graēci putēnt menændri, in dictǽ consul dissenÞiet dūo.</p>
</div>
<div>
    <p>Lorem īpsum dōlor sit amet, eæm ǽð cibo ēlectrǣm tōrquātos, mǽzim prodesseÞ posidoniūm eī est. Nam eu orætīo commune adversarium. Æssum exerci irǣcundia sēd iƿ, eÞ vim aðipīsci honestǣtis cotīðiēque, debēt oblīque dūo cu. Ūtroque rationiȝūs est ād. Rebum moderǣÞius dissēntīet cum eī, est ǽeterno sǣdīpsċīƿg repudiandae cu. No pri audiam noƿūmes æppēterē, usu ut graēci putēnt menændri, in dictǽ consul dissenÞiet dūo.</p>
</div>

CSS

/* Set focus on elements that can recieve it.    
 * http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
 */
 :focus {
    outline: #4d90fe;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -1px;
}
/* Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */
[tabindex="-1"]:focus {
    outline: none !important;
}