Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

You can use CSS to make the focus indicator more visually apparent and keyboard-friendly.

Markup

Code Block
<label for="name">Your name:</label>
<input class="form-visual-indicator" id="name" type="text"><button>Submit</button>
<button>Add Hours</button>
<button>Next</button>

CSS

Code Block
.form-visual-indicatorbutton:focus {
  outline-style: solid;
  outline-widthborder: 5px;   outline-color: #495ED4solid #000000;
}

View HTML markup on github