Having multiple buttons. Using :active state at the same time

Question

.a {
  background-color: white;
}

.a:focus {
  background-color: green;
}

.b {
  background-color: yellow;
}

.b:focus {
  background-color: blue;
}

<button class="a">1</button>
<button class="a">2</button>
<button class="b">3</button>
<button class="b">4</button>

how can i make it so that when i click on a button, its :focus state doesnt disappear unless i click on a button of the same class? ex in the code above, if i click on 1, its gonna turn green. if i click on 3, 1 will be green and 3 will be blue. but if i click on 2 instead of 3, 1 will go back to white and 2 will be green

preferable solution: in html or css

I'm not sure what you want to achieve, but it looks like you are trying to replicate the input `type=radio` functionality but with button tags instead. Maybe what you need is to use inputs with `type=radio`, and then style the associated labels as buttons and use the `:checked` pseudo-class instead of `:focus`, using radios with the same `name` (instead of the same `class`) should do what you want. — arieljuod, Oct 10 '21 at 04:26

showdev · Answer 1 · 2021-10-10T05:23:39.497

As mentioned in arieljuod's comment above, <input> elements of type radio work as you describe. You can define a radio group by "giving each of [the] radio buttons in the group the same name."

If you are not limited to using <button>, class, and :focus, you can use <input type="radio">, name, and :checked, with <label> to help style them like buttons.

Note the adjacent sibling combinator +, used to match <span> only when it immediately follows a checked input.

.radio-button input {
  display: none;
}

.radio-button span {
  padding: 0.1em 0.6em;
  background-color: rgb(239, 239, 239);
  border: 2px outset rgb(118, 118, 118);
  text-align: center;
}

.radio-button input[name="a"]:checked + span {
  background-color: green;
}

.radio-button input[name="b"]:checked + span {
  background-color: blue;
}

.radio-button input[name="c"]:checked + span {
  background-color: red;
}

<label class="radio-button">
  <input type="radio" name="a">
  <span>a1</span>
</label>
<label class="radio-button">
  <input type="radio" name="a">
  <span>a2</span>
</label>
<label class="radio-button">
  <input type="radio" name="b">
  <span>b1</span>
</label>
<label class="radio-button">
  <input type="radio" name="b">
  <span>b2</span>
</label>
<label class="radio-button">
  <input type="radio" name="b">
  <span>b3</span>
</label>
<label class="radio-button">
  <input type="radio" name="c">
  <span>c1</span>
</label>
<label class="radio-button">
  <input type="radio" name="c">
  <span>c2</span>
</label>

Also see:
How to Style a Selected Radio Buttons Label?

score 0 · Answer 2 · edited Oct 10 '21 at 05:01

This is a solution with JavaScript, if you tap on 1 it will turn green, if you tap on 2, 1 will turn white, and 2 will turn green

var buttonA = document.querySelector(".a");
var buttonB = document.querySelector(".b");
var buttonC = document.querySelector(".c");
var buttonD = document.querySelector(".d");
buttonA.style.backgroundColor = "white";
buttonB.style.backgroundColor = "white";
buttonC.style.backgroundColor = "yellow";
buttonD.style.backgroundColor = "yellow";
buttonA.addEventListener("click", function() {
  if (buttonA.style.backgroundColor == "white") {
    buttonA.style.backgroundColor = "green";
  } else if (buttonA.style.backgroundColor == "green") {
    buttonA.style.backgroundColor = "white";
  } else {
    buttonA.style.backgroundColor = "white";
  }
});
buttonB.addEventListener("click", function() {
  if (buttonB.style.backgroundColor == "white" && buttonA.style.backgroundColor == "green") {
    buttonB.style.backgroundColor = "green";
    buttonA.style.backgroundColor = "white";
  } else if (buttonB.style.backgroundColor == "white") {
    buttonB.style.backgroundColor = "green";
  } else if (buttonB.style.backgroundColor == "green") {
    buttonB.style.backgroundColor = "white";
  } else {
    buttonB.style.backgroundColor = "white";
  }
});
buttonC.addEventListener("click", function() {
  if (buttonC.style.backgroundColor == "yellow") {
    buttonC.style.backgroundColor = "blue";
  } else if (buttonC.style.backgroundColor == "blue") {
    buttonC.style.backgroundColor = "yellow";
  } else {
    buttonC.style.backgroundColor = "yellow";
  }
});
buttonD.addEventListener("click", function() {
  if (buttonD.style.backgroundColor == "yellow") {
    buttonD.style.backgroundColor = "blue";
  } else if (buttonD.style.backgroundColor == "blue") {
    buttonD.style.backgroundColor = "yellow";
  } else {
    buttonD.style.backgroundColor = "yellow";
  }
});

<button class="a">1</button>
<button class="b">2</button>
<button class="c">3</button>
<button class="d">4</button>

Having multiple buttons. Using :active state at the same time

2 Answers2