How to style label associated with selected radio input and checked checkboxes using CSS ? Last Updated : 29 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.ApproachWe 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> Output: Comment More infoAdvertise with us Next Article How to Change the Checked Mark Color of a Checkbox using CSS? A akshitsaxenaa09 Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 CSS-Questions Similar Reads How to Change the Checked Mark Color of a Checkbox using CSS? Checkboxes are commonly used on websites to enable users to make selections, such as agreeing to terms and conditions or choosing preferences. A checkbox is a small square box in forms that users can click to select or deselect an option. By default, the checkmark inside the checkbox has a basic sty 5 min read How to Change Label when Radio Button Checked in Tailwind CSS ? Tailwind CSS is a popular utility-first CSS framework that enables developers to quickly style their web applications without writing much CSS code. In this article, we will discuss how to change the label text of a radio button when it is checked using Tailwind CSS. We will explore different approa 3 min read How to align checkboxes and their labels on cross-browsers using CSS ? For aligning the checkboxes or radio buttons with their labels can be achieved in many ways. Some of the simplest methods to achieve this are described below with proper code and output in different browsers. Now styling can be done in various ways to align the checkboxes and their labels. For this 2 min read How to style a checkbox using CSS ? Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo 3 min read How to create an HTML checkbox with a clickable label? To create an HTML checkbox with a clickable label, use the <label> element and associate it with the checkbox using the for attribute, matching the checkbox's id. This makes the label clickable, toggling the checkbox state when clicked. The clickable label means the checkbox gets on/off when t 1 min read How to Make a Toggle Button using Checkbox and CSS ? Toggle means switching actions from one state to another. In simple words, when we switch from one state to the other state and back again to the former state we say that we are toggling. In this article, we are using the checkbox and CSS to create a toggle button. In web development, we can use thi 3 min read Like