Update: it seems that I cannot utilize <> brackets as it hides names?...
I have come across similar versions of this query, but none of them address my specific problem, which I believe is quite simple. I am constructing the following radio button group in react:
const options = ["YTD", "Week", "Month", "Pre AS", "Post AS"]
const buttons =
<form>
<div className="radio-group">
{options.map((d, i) => {
return (
<label>
<input
type={"radio"}
value={options[i]}
checked={timeframeNew === options[i]}
onChange={this.handleTimeframeNewChange}
/>
<span>{options[i]}</span>
</label>
)
})}
</div>;
and here is my current CSS for styling the buttons to look nice...
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #333;
background: #EEE;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
border: 2px solid orange;
}
input[type=radio]:checked + label {
color: red;
background: #333;
}
label + input[type=radio] + label {
border-left: solid 2px blue;
}
.radio-group {
border: solid 2px green;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
Regrettably, the CSS is not functioning as expected. Especially, the selection - input[type=radio]:checked + label does not work because there is no label directly after an input. The only way I have managed to successfully make my react onChange handler function operate is by placing the input within the label, like so, and then returning the label in each .map loop.
*Since the return must be a single element, if I want to remove the out of the label, I would then need to encompass them both in a div or a span, and for some reason doing so disrupts my onChange handler...
So my inquiry is, how how how can I, in CSS, select the label that corresponds to the clicked input. I aim to modify the entire label's color and background when it is / isn't clicked, so selecting the span doesn't assist (since that solely alters the text's color/background, not the entire label.
Thank you in advance!!