-1

I am creating a contact form and want to make it more barrier friendly by highlighting the background of a selected item while tabbing through them with keyboard.

Here is a fiddle to help explain.

When clicking in the first box and then hitting tab, the dropdown menu is selected and should change its background-color to indicate its selection. (Note: not affecting the dropdown options)

How do I change the correct part of the element when its selected via tabulator?

<html>
  <body>
    <div class="textarea1">
      <textarea rows="1" cols="20">
  </textarea>
    </div>
    <div class="dropdown">
      <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
    </div>
    <div class="textarea2">
      <textarea rows="1" cols="20">
  </textarea>
    </div>
  </body>
</html>
Kazen
  • 100
  • 1
  • 2
  • 10
  • 1
    There's no need for JS here. Use CSS, `textarea:focus, select:focus { background-color: yellow; }` – Rory McCrossan Jul 19 '18 at 13:19
  • define a class in css for focus and give the wanted elements that class. Look [here](https://codepen.io/DeeLiciouz/pen/MBbWQB) –  Jul 19 '18 at 13:23

1 Answers1

0

I have edited the jsfiddle link https://jsfiddle.net/srg8o0v4/

You just need to add :focus selector for all your form elements as above in textarea and select.

textarea:focus, select:focus { background-color: yellow; }
Sonia
  • 1,909
  • 1
  • 11
  • 13