Focus Woes

A test highlighting the difference in behaviour between default and custom focus styles.

by jamessouth

HTML

<h1>Focus Woes</h1>

<p>Issue: Without custom styling the <code>:focus</code> pseudo selector only fires when the element is tabbed to. When custom styling is applied the element remains focussed upon mouse or keyboard interaction. This leads to me getting it in the ear from clients.</p>
<p>Is there a better way?</p>

<h3>Default focus styles.</h3>

<p> <a href="#"> I am a test link with default styles applied.</a>

</p>
<p>
    <button>I am a test button with default styles applied.</button>
</p>
<div class="custom-focus">
     <h3>Custom focus styles.</h3>
 <pre><code>.custom-focus :focus {
    outline: dotted 1px blue;
}</code></pre> 
    <p> <a href="#"> I am a test link with custom styles applied.</a>

    </p>
    <p>
        <button>I am a test button with custom styles applied.</button>
    </p>
</div>

CSS

.custom-focus :focus {
    outline: dotted 1px blue;
}