Utilizing React Semantic UI presents a challenge when attempting to change the background color of a parent label related to an input element, particularly with a hidden radio button. In this situation, it is important for the label to maintain its button-like appearance. Although similar effects were achieved using standard HTML and CSS, the functionality did not translate seamlessly to the React Semantic UI library.
For reference, a CodeSandbox showcasing the React Semantic UI Library implementation can be accessed here. It should be noted that while the code mirrors previous attempts, the desired result was not achieved.
Below is an excerpt from the code:
<Segment>
<Menu attached="top" borderless={true}>
<Menu.Item>
<Header>
Scale:
</Header>
<Label className="filter_check" size="large">
<Form.Field
label="Year"
control='input'
type='radio'
name='year'
/>
</Label>
</Menu.Item>
</Menu>
</Segment>
.filter_check input {
display: none;
}
input:checked + .filter_check>.label {
background: #00b5ad !important;
width: 100% !important;
}
.field input[type=radio]:checked + label {
background: red;
color: #fff;
margin-left: 1em;
padding: .3em .78571429em;
}
The resulting "compiled" HTML is shown below:
<div class="ui segment">
<div class="ui borderless top attached menu">
<div class="item">
<div class="ui header">Scale:</div>
<div class="ui large label filter_check">
<div class="field"><label><input name="year" type="radio"> Year</label></div>
</div>
</div>
</div>
</div>