Css - How to Style a Selected Radio Buttons Label?

html

responsive-design

css

accessibility

byNikita Barsukov·Oct 27, 2024

Apply distinctive appearances to the label of a selected radio button by utilizing the CSS :checked pseudo-class along with the + sibling combinator:

input[type="radio"]:checked + label {
  font-weight: bold;  /* Because bold make things "pop", right? 🍿 */
  color: red;  /* Red for passion, eh? 💘 */
}

For this style to work optimally, have your label elements immediately following the respective radio input:

<input type="radio" id="radio1" name="group" />
<label for="radio1">Label 1</label>

When the radio button with id="radio1" is selected, the corresponding label will enhance to bold and red text.

Effective 'id' and 'for' attribute pairing

Proper usage of 'id' and 'for' attributes creates a valuable link between radio buttons and labels. Such connections not only accommodate accessibility standards but also prepare the foundation for comprehensive styling and interactivity implementation.

Grouping Logic: The name attribute functions as a powerful tool to group radio buttons, allowing for exclusive selection within the set.
Stylish Concealment: display: none elegantly hides the radio button whilst maintaining its functionality, paving the way for unique visual renditions.

Advanced usage of selectors

Beyond the basic input[type="radio"] + label combination, we can exploit the cascading nature of CSS for more complex scenarios:

Sibling Styles: Use the ~ sibling combinator to apply styles to all subsequent labels linked to a selected radio button.

input[type="radio"]:checked ~ label {
  outline: 2px solid green;  /* Etch a sketch, anyone? 🎨 */
}

Span for Greater Control: Incorporating <span> tags within labels paves the way for more specific control over design elements.

Optimal utilization of JavaScript

While pure CSS can demonstrate substantial power, JavaScript can cater to intricate or dynamic styling demands:

React to Changes: Harnessing the onChange event allows for real-time style updates following user interactions.
Toggling Classes: JavaScript can effectively manipulate classes based on selection, facilitating the availability of an entire arsenal of predefined styles to alternate between.

Design custom radio buttons

Personalized designs can significantly boost the user experience. It provides a unique, stylish ambience to an otherwise uniform lineup of radio buttons:

Custom Styling: Tactical use of CSS positioning and pseudo-elements (::before and ::after) can whip up visually appealing custom radio buttons that resonate with your brand's personality.

Don't forget about accessibility

While embellishing, remember to prioritize accessibility and intuitive user interaction:

Highlight Focus: Leveraging label:focus-within brings the focus of a radio input into the limelight, bettering keyboard-assisted navigation.
Restricted '!important' Use: Apply !important sparingly to circumvent overriding other CSS rules, ensuring code maintainability.