Focus Ring Test

by Andrew Holloway

HTML

<fieldset>
  <legend>
    Unstyled, focusable elements
  </legend>
  <section>
    <button>Click Me</button>
    <input type="text">
    <input type="password">
    <input type="radio" id="test1" name="test">
    <label for="test1">Test 1</label>
    <input type="radio" id="test2" name="test">
    <label for="test2">Test 2</label> </section>
</fieldset>

<fieldset class="using-focus">
  <legend>
    Elements Styled with <span class="example">:focus</span>
  </legend>
  <section>
    <button>Click Me</button>
    <input type="text">
    <input type="password">
    <input type="radio" id="test3" name="test">
    <label for="test3">Test 1</label>
    <input type="radio" id="test4" name="test">
    <label for="test4">Test 2</label>
  </section>
</fieldset>

<fieldset class="using-focus-visible">
  <legend>
    Elements Styled with <span class="example">:focus-visible</span>
  </legend>
  <section>
    <button>Click Me</button>
    <input type="text">
    <input type="password">
    <input type="radio" id="test5" name="test">
    <label for="test5">Test 1</label>
    <input type="radio" id="test6" name="test">
    <label for="test6">Test 2</label> </section>
</fieldset>

CSS

fieldset {
  margin: 2em 0;
}

.using-focus input:focus,
.using-focus button:focus,
.using-focus .example{
  outline: 2px solid red;
  border-radius: 2px;
}

.using-focus-visible input:focus-visible,
.using-focus-visible button:focus-visible,
.using-focus-visible .example {
  outline: 2px solid red;
  box-shadow: 0 0 3px 5px rgba(255, 0, 0, 0.3);
  border-radius: 2px;
}