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

Last Updated : 14 Mar, 2022

The HTML <input type=”radio”> is used to define a Radio Button. Radio Buttons are used to let the user select exactly one option from a list of predefined options. Radio Button input controls are created by using the “input” element with a type attribute having value as “radio”.

In this article, we will learn to style labels associated with selected radio input and checkboxes.

Syntax:

<input type="radio/checkbox">

The HTML <input type=”checkbox”> is used to define a checkbox field. The checkbox is shown as a square box that is ticked when it is activated. It allows the user to select one or more options among all the limited choices.

Now we will style the label of the radio buttons and checkboxes.

Approach

We will first select the class/id of the div in which the label tag is used.
Then use the syntax:

.className input[type="radio/checkbox"]: checked + label {
    // Whatever properties to be altered  
}

Example 1: In this example, we will style label of the radio buttons:

HTML

<html> 
  
<head> 
    <title>Styling Label</title> 
    <style> 
        .radioButton input[type="radio"]:checked+label { 
            background-color: green; 
            color: white; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="radioButton"> 
        <p>Please select your favorite Web language:</p> 
        <input type="radio" id="html" name="fav_language" 
               value="HTML"> 
        <label for="html">HTML</label><br><br><br> 
        <input type="radio" id="css" name="fav_language" 
               value="CSS"> 
        <label for="css">CSS</label><br><br><br> 
        <input type="radio" id="javascript" name="fav_language" 
               value="JavaScript"> 
        <label for="javascript">JavaScript</label> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will style the label of the checkboxes.

HTML

<html> 
  
<head> 
    <title>Styling Label</title> 
    <style> 
        .checkBox input[type="checkbox"]:checked+label { 
            background-color: green; 
            color: white; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="checkBox"> 
        <p>Which language you can speak?:</p> 
        <input type="checkbox" name="check" id="GFG" 
               value="1" checked> 
        <label> Hindi</label> 
        <br> 
        <input type="checkbox" name="check" value="2"> 
        <label> English</label> 
        <br> 
    </div> 
</body> 
  
</html>