<p class="instructions">
  (click a radio button to put focus within the form)
</p>
<form>
  <fieldset>
    <legend>Favorite doggo:</legend>
    <label>
      <input name="dogs" type="radio" value="corgi">
      Corgi
    </label>
    <label>
      <input name="dogs" type="radio" value="frenchie">
      Frenchie
    </label>
    <label>
      <input name="dogs" type="radio" value="doodle">
      Doodle
    </label>
    <label>
      <input name="dogs" type="radio" value="all">
      They're all good!
    </label>
  </fieldset>
</form>

/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 1em;
}

.instructions {
  margin: 8px;
}

form {
  padding: 16px 8px;
  border: 2px solid black;
  border-radius: 8px;
  width: 300px;
}

form:focus-within {
  background: #ffecb3;
}

fieldset {
  border: none;
}

label {
  display: block;
  margin: 16px 0;
}