CODEWITHSUNDEEP
htmlcss
taji01
taji01

Reputation: 2615

Change background-color of drop-down when it is in focus and when it is selected

In my form, I have multiple fields, 2 input boxes, and one dropdown. When I press tab I move to the next field until I reach the dropdown. When my tab index reaches the drop-down I want it to be yellow, but as soon as I click on the dropdown it should become a white background. How can I do that?

select:focus{
  background-color: yellow;
  color: black;
}

select:hover{
  background-color: white;
}
<!DOCTYPE html>
<html>

<body>

First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>

enter image description here

Upvotes: 1

Views: 7986

Answers (1)

scottohara
scottohara

Reputation: 765

You'll need some light JavaScript to pull this off, but this ought to get you started:

CSS 

    .form-row {
      padding: 8px;
    }

    /* when the select is focused, change the bg color */
    select:focus {
      background: yellow
    }

Demo Markup:

    <div class="form-row">
      <label for="text">
        Write Something:
      </label>
      <input type="text" id="text">
    </div>

    <div class="form-row">
      <label for="select">
        Choose Something:
      </label>

      <select id="select">
        <option>
          opt 1
        </option>
        <option>
          opt 2
        </option>
        <option>
          opt 3
        </option>
      </select>
    </div>

JavaScript

    <script>
      // since clicking a select also focuses it, we need to undo
      // the focus style. here i'm adding an inline style to do this
      // but you could add a class that overwrites the focus style instead
      document.getElementById('select').addEventListener('click', function () {
        this.style.background = '#fff'
      });

      // we want to be able to get the yellow focus again
      // if we leave the select box, but re-focus it again
      // so remove the inline style on blur
      document.getElementById('select').addEventListener('blur', function () {
        this.removeAttribute('style');
      });
    </script>

Upvotes: 1

Related Questions