<button class="a">1</button>
<button class="a">2</button>
<button class="b">3</button>
<button class="b">4</button>
css
.a {
background-color: white;
.a:focus {
background-color: green;
}
.b {
background-color: yellow;
}
.b:focus {
background-color: blue;
}
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
CodePudding user response:
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?
CodePudding user response:
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>