Utilizing numerous buttons with the simultaneous activation of their :active state

Question

Utilizing numerous buttons with the simultaneous activation of their :active state

.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>

Is there a way to maintain the :focus state of a button even after clicking on another button, unless it belongs to the same class? For example, in the given code snippet, if I click on button 1 it will turn green. If then I click on button 3, 1 will be green and 3 will be blue. However, if I click on button 2 instead of 3, 1 will revert back to white and 2 will become green.

An ideal solution would involve using HTML or CSS only.

html css button pseudo-class

Answer 1

Answer №1

As pointed out in arieljuod's comment above, the behavior of <input> radio elements aligns with your description. By assigning the same name attribute to each radio button within a group, you can create a radio group.

If you're open to alternatives beyond using <button>, class, and :focus, consider employing

<input type="radio">

, name, and :checked, coupled with <label> for stylized button-like effects.

Note the usage of the adjacent sibling combinator +, which targets <span> only when it directly 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>

For more information, check out:
How to Style a Selected Radio Buttons Label?

Answer 2

As pointed out in arieljuod's comment above, the behavior of <input> radio elements aligns with your description. By assigning the same name attribute to each radio button within a group, you can create a radio group.

If you're open to alternatives beyond using <button>, class, and :focus, consider employing

<input type="radio">

, name, and :checked, coupled with <label> for stylized button-like effects.

Note the usage of the adjacent sibling combinator +, which targets <span> only when it directly 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>

For more information, check out:
How to Style a Selected Radio Buttons Label?

Answer 3

Answer №2

Here is a fun JavaScript solution! When you click on button 1, it will change color to green. If you then click on button 2, button 1 will turn white and button 2 will turn green.

var buttonOne = document.querySelector(".1");
var buttonTwo = document.querySelector(".2");
var buttonThree = document.querySelector(".3");
var buttonFour = document.querySelector(".4");
buttonOne.style.backgroundColor = "white";
buttonTwo.style.backgroundColor = "white";
buttonThree.style.backgroundColor = "yellow";
buttonFour.style.backgroundColor = "yellow";
buttonOne.addEventListener("click", function() {
  if (buttonOne.style.backgroundColor == "white") {
    buttonOne.style.backgroundColor = "green";
  } else if (buttonOne.style.backgroundColor == "green") {
    buttonOne.style.backgroundColor = "white";
  } else {
    buttonOne.style.backgroundColor = "white";
  }
});
buttonTwo.addEventListener("click", function() {
  if (buttonTwo.style.backgroundColor == "white" && buttonOne.style.backgroundColor == "green") {
    buttonTwo.style.backgroundColor = "green";
    buttonOne.style.backgroundColor = "white";
  } else if (buttonTwo.style.backgroundColor == "white") {
    buttonTwo.style.backgroundColor = "green";
  } else if (buttonTwo.style.backgroundColor == "green") {
    buttonTwo.style.backgroundColor = "white";
  } else {
    buttonTwo.style.backgroundColor = "white";
  }
});
buttonThree.addEventListener("click", function() {
  if (buttonThree.style.backgroundColor == "yellow") {
    buttonThree.style.backgroundColor = "blue";
  } else if (buttonThree.style.backgroundColor == "blue") {
    buttonThree.style.backgroundColor = "yellow";
  } else {
    buttonThree.style.backgroundColor = "yellow";
  }
});
buttonFour.addEventListener("click", function() {
  if (buttonFour.style.backgroundColor == "yellow") {
    buttonFour.style.backgroundColor = "blue";
  } else if (buttonFour.style.backgroundColor == "blue") {
    buttonFour.style.backgroundColor = "yellow";
  } else {
    buttonFour.style.backgroundColor = "yellow";
  }
});

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

Answer 4

Here is a fun JavaScript solution! When you click on button 1, it will change color to green. If you then click on button 2, button 1 will turn white and button 2 will turn green.

var buttonOne = document.querySelector(".1");
var buttonTwo = document.querySelector(".2");
var buttonThree = document.querySelector(".3");
var buttonFour = document.querySelector(".4");
buttonOne.style.backgroundColor = "white";
buttonTwo.style.backgroundColor = "white";
buttonThree.style.backgroundColor = "yellow";
buttonFour.style.backgroundColor = "yellow";
buttonOne.addEventListener("click", function() {
  if (buttonOne.style.backgroundColor == "white") {
    buttonOne.style.backgroundColor = "green";
  } else if (buttonOne.style.backgroundColor == "green") {
    buttonOne.style.backgroundColor = "white";
  } else {
    buttonOne.style.backgroundColor = "white";
  }
});
buttonTwo.addEventListener("click", function() {
  if (buttonTwo.style.backgroundColor == "white" && buttonOne.style.backgroundColor == "green") {
    buttonTwo.style.backgroundColor = "green";
    buttonOne.style.backgroundColor = "white";
  } else if (buttonTwo.style.backgroundColor == "white") {
    buttonTwo.style.backgroundColor = "green";
  } else if (buttonTwo.style.backgroundColor == "green") {
    buttonTwo.style.backgroundColor = "white";
  } else {
    buttonTwo.style.backgroundColor = "white";
  }
});
buttonThree.addEventListener("click", function() {
  if (buttonThree.style.backgroundColor == "yellow") {
    buttonThree.style.backgroundColor = "blue";
  } else if (buttonThree.style.backgroundColor == "blue") {
    buttonThree.style.backgroundColor = "yellow";
  } else {
    buttonThree.style.backgroundColor = "yellow";
  }
});
buttonFour.addEventListener("click", function() {
  if (buttonFour.style.backgroundColor == "yellow") {
    buttonFour.style.backgroundColor = "blue";
  } else if (buttonFour.style.backgroundColor == "blue") {
    buttonFour.style.backgroundColor = "yellow";
  } else {
    buttonFour.style.backgroundColor = "yellow";
  }
});

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

Utilizing numerous buttons with the simultaneous activation of their :active state

Answer №1

Answer №2

Similar questions

Failure to Establish a Session

The white background of the div conceals the shadow of the Bootstrap navbar

Tips for utilizing a particular style from a font collection?

Parsing all HTML elements using Nokogiri

Arranging Bootstrap inputs horizontally with lengthy labels

Encountered a MySQL error while attempting to insert an image into the database

Omit child DIV element in JavaScript and the Document Object Model

What steps can be taken to ensure the Instagram logo remains visible even when it is being hovered over?

Encountering a NullPointerException while trying to load a resource from a directory that is not within

Creating a FusionCharts time series with a sleek transparent background

Electron generates a unique landing page for your first launch

Using weasyprint to convert a single HTML page into a PDF

What is the best way to conceal an element when another element is given a specific class?

Trimming text from the start and inserting ellipsis in a multi-line passage

Unconventional border effect while hovering over image within navigation container of Bootstrap

What is the best method for inserting CSS into a webpage using a Chrome extension?

I find myself with just one button in my javascript function, but I actually need two

Issue with displaying spinner in bootstrap version 4.0.0

Troubleshooting Problems with Positioning and Floating in HTML and CSS

Can you explain the process for setting the css property text-fill-color in IE and Mozilla browsers, similar to how I set -webkit-text-fill-color for Webkit?