How to style label associated with selected radio input and checked checkboxes using CSS ? (original) (raw)

Last Updated : 29 Jul, 2024

The HTML 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:

The HTML 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 `

`

**Output:

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

HTML `

`

**Output: