Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to style label associated with selected radio input and checked checkboxes using CSS?

CSS Web Development Front End Technology

To style label associated with selected radio input and checked checkboxes using CSS, is important task in forms as it makes it easy to identify the option selected by user. In this article, we will understand how to style label associated with selected radio input and checked checkboxes using CSS using :checked pseudo class selector and CSS combinators.

Syntax

/* Style label next to checked radio button */
input[type="radio"]:checked + label {
    /* CSS styles */
}

/* Style label next to checked checkbox */
input[type="checkbox"]:checked + label {
    /* CSS styles */
}

/* Style specific labels using general sibling combinator */
input[type="radio"]:checked ~ label[for="specific-id"] {
    /* CSS styles */
}

Method 1: Style All Checked Labels

This method styles the labels of all checked radio buttons and checkboxes using the adjacent sibling combinator (+):

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .form-container {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .form-container input[type="radio"]:checked + label,
        .form-container input[type="checkbox"]:checked + label {
            background-color: #04af2f;
            color: white;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 4px;
        }
        
        .form-container label {
            margin-left: 5px;
            padding: 5px 10px;
            transition: all 0.3s ease;
        }
        
        .form-container input {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h3>Select Your Preferences</h3>
        
        <p><b>Choose one option:</b></p>
        <input type="radio" id="option1" name="radio-group" />
        <label for="option1">Option 1</label><br>
        
        <input type="radio" id="option2" name="radio-group" />
        <label for="option2">Option 2</label><br>
        
        <input type="radio" id="option3" name="radio-group" />
        <label for="option3">Option 3</label><br><br>
        
        <p><b>Select multiple options:</b></p>
        <input type="checkbox" id="feature1" name="features" />
        <label for="feature1">Feature A</label><br>
        
        <input type="checkbox" id="feature2" name="features" />
        <label for="feature2">Feature B</label><br>
        
        <input type="checkbox" id="feature3" name="features" />
        <label for="feature3">Feature C</label>
    </div>
</body>
</html>

A form with radio buttons and checkboxes appears. When you select any radio button or check any checkbox, its corresponding label gets highlighted with a green background, white text, and bold font weight.

Method 2: Style Specific Labels Only

This method styles only specific labels using the general sibling combinator (~) and attribute selectors:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .selective-form {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        /* Style only option1 radio and feature2 checkbox labels */
        .selective-form input[type="radio"]:checked ~ label[for="option1"],
        .selective-form input[type="checkbox"]:checked ~ label[for="feature2"] {
            background-color: #ff6b35;
            color: white;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 4px;
        }
        
        .selective-form label {
            margin-left: 5px;
            padding: 5px 10px;
            background-color: #f0f0f0;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        
        .selective-form input {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="selective-form">
        <h3>Selective Label Styling</h3>
        
        <p><b>Radio buttons (only Option 1 will be highlighted):</b></p>
        <input type="radio" id="option1" name="radio-group" />
        <label for="option1">Option 1 (Special)</label><br>
        
        <input type="radio" id="option2" name="radio-group" />
        <label for="option2">Option 2 (Normal)</label><br>
        
        <input type="radio" id="option3" name="radio-group" />
        <label for="option3">Option 3 (Normal)</label><br><br>
        
        <p><b>Checkboxes (only Feature B will be highlighted):</b></p>
        <input type="checkbox" id="feature1" name="features" />
        <label for="feature1">Feature A (Normal)</label><br>
        
        <input type="checkbox" id="feature2" name="features" />
        <label for="feature2">Feature B (Special)</label><br>
        
        <input type="checkbox" id="feature3" name="features" />
        <label for="feature3">Feature C (Normal)</label>
    </div>
</body>
</html>

A form appears where only "Option 1" radio button and "Feature B" checkbox labels get orange highlighting when selected. Other labels remain with their default gray background even when selected.

Key Points

  • Use input[type="radio"]:checked + label to style labels immediately following checked radio buttons
  • Use input[type="checkbox"]:checked + label to style labels immediately following checked checkboxes
  • The + combinator selects the immediately adjacent sibling element
  • The ~ combinator can be used with specific selectors to target particular labels
  • Always ensure proper id and for attributes are used to associate labels with inputs

Conclusion

The :checked pseudo-class combined with CSS combinators provides an effective way to style labels of selected form elements. This technique enhances user experience by providing visual feedback for form interactions.

Updated on: 2026-03-15T17:16:56+05:30

4K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements