CODEWITHSUNDEEP
htmlcss
Lit2000hania
Lit2000hania

Reputation: 97

How to change the background color of select tag consecutively

Lets say I have a HTML page with 3 select tags:

enter image description here

And I want to do something like this:

enter image description here

As you can see, the first select background will have a different color. After selecting an option in the first select, I want the second select to have a different background color:

enter image description here

The same goes for the third one after I select an option in the second one:

enter image description here

And finally, after I select an option in the last select, I have the following:

enter image description here

I want to know if it is possible to do it just using CSS and not manipulating the DOM with JavaScript or JQuery.

The code sample, if necessary:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Select</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <form>
      <div class="form-group">
        <label>Conference</label>
        <select class="form-control">
          <option>Select a Conference</option>
          <option>Western</option>
          <option>Eastern</option>
        </select>
      </div>
      <br />
      <div class="form-group">
        <label>Team</label>
        <select class="form-control">
          <option>Select a Team</option>
          <option>Los Angeles Lakers</option>
          <option>Los Angeles Clippers</option>
        </select>
      </div>
      <br />
      <div class="form-group">
        <label>Player</label>
        <select class="form-control">
          <option>Select a Player</option>
          <option>LeBron James</option>
          <option>Kevin Durant</option>
        </select>
      </div>
    </form>
  </body>
</html>

CSS:

.form-control {
  display: block;
  width: 20em;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  appearance: auto;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

form {
  text-align: -webkit-center;
  margin-top: 10em;
}

body {
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

Thank you!

Upvotes: 0

Views: 53

Answers (1)

user14657023
user14657023

Reputation:

Does This Help?

.form-control { display: block; width: 20em; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; appearance: auto; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } 
form { text-align: -webkit-center; margin-top: 10em; } body { margin: 0; font-family: var(--bs-font-sans-serif); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
select:focus{background-color: #F0F8FF;}
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Select</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <form>
      <div class="form-group">
        <label>Conference</label>
        <select class="form-control">
          <option>Select a Conference</option>
          <option>Western</option>
          <option>Eastern</option>
        </select>
      </div>
      <br />
      <div class="form-group">
        <label>Team</label>
        <select class="form-control">
          <option>Select a Team</option>
          <option>Los Angeles Lakers</option>
          <option>Los Angeles Clippers</option>
        </select>
      </div>
      <br />
      <div class="form-group">
        <label>Player</label>
        <select class="form-control">
          <option>Select a Player</option>
          <option>LeBron James</option>
          <option>Kevin Durant</option>
        </select>
      </div>
    </form>
  </body>
</html>

I used the ":focus" selector on your select fields to turn them light blue when the user is choosing an option and until they click somewhere else!

Upvotes: 1

Related Questions