Styling Labels for Checked Inputs using CSS

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

Labels associated with radio buttons and checkboxes are a crucial component in creating user-friendly web forms. Styling them can not only make the form look better but also enhance the user experience by providing visual cues about selected options.

Labels in HTML are used to associate a description with an input element, such as a text input, checkbox, radio button, or dropdown list. This element usually appears before the input element and provides a clear and concise description of what the input element is for.

Input elements in HTML are used to collect user input data in a form. They can include various types of input fields such as text, password, email, number, date, checkbox, radio, and more. The input element specifies what type of data should be collected, the format of the data, and any validation rules that should be applied to the data before submission.

In this article, we will learn how to style the labels associated with selected radio inputs and checked checkboxes using CSS. We will also learn the different approaches to styling labels along with their syntax and examples.

Different Methods to Style Labels Using CSS

There are multiple methods available to style the label associated with the selected radio input and checked checkboxes using CSS. Let’s see some of the common methods used in styling labels.

Method 1: Using :Checked Selector

In this method, we will be using the :checked selector to style the label with selected radio input and checked checkboxes in CSS. In this method, labels associated with selected radio inputs and checked checkboxes are styled using the :checked selector. The :checked selector is used to select currently checked elements including radio inputs and checkboxes. The styles to labels with the checked elements are styled by using the + selector to target the label that immediately follows the checked element.

Syntax

Below is the syntax of styling the input using the :checked selector.

input[type="radio"]:checked + label, input[type="checkbox"]:checked + label < /* add your styles here to style the input labels */ >

Example

In the given example, the background color and the color property is used to change the background color of the label text to green and color to white when the associated input is checked.

   input[type="radio"]:checked+label, input[type="checkbox"]:checked+label 
Styling Labels for Checked Inputs using CSS
 
 Option 1 
 Option 2 
 Option 3 
 Checkbox 1 
 Checkbox 2 
 Checkbox 3 
   

Method 2: Using :Checked Selector and :Before Pseudo-elements

In this method, we will be using the :checked selector and :before pseudo elements to style the label with selected radio input and checked checkboxes in CSS. The :checked selector and :before pseudo elements is used to create custom styling for the labels applied only when the associated input is checked.

Syntax

Below is the syntax of styling the input using the :checked selector and :before pseudo-elements.

input[type="radio"]:checked + label:before, input[type="checkbox"]:checked + label:before < /* add your styles here to style the input labels */ >

Example

In the given example, we have used the content property to add custom symbols before the label text using the :before pseudo-element. Along with this, the background color is also set to blue.

   input[type="radio"]:checked + label:before < content: "\25CF"; margin-right: 8px; background-color: blue; >input[type="checkbox"]:checked + label:before 
Styling Labels for Checked Inputs using CSS
 
 Option 1 
 Option 2 
 Option 3 
 Checkbox 1 
 Checkbox 2 
 Checkbox 3 
   

Method 3: Using :After and :Before Pseudo-elements

In this method, we will be using the :after and :before pseudo-elements to style the label with selected radio input and checked checkboxes in CSS. These pseudo-elements are used to insert content before or after an element, which can be used to create custom styling for labels.

Syntax

Below is the syntax of styling the input using the :after and :before pseudo-elements.

input[type="radio"] + label:before, input[type="checkbox"] + label:before < /* add your :before styles here to style the input labels */ >input[type="radio"] + label:after, input[type="checkbox"] + label:after < /* add your :after styles here to style the input labels */ >

Example

In the given example, we have used multiple properties like margin-right, color, padding, and content property to add custom symbols before the label text using the :after and the :before pseudo-element. Along with this, the background color is also set to green.

   input[type="radio"] + label:before < content: "\25CF"; margin-right: 5px; background-color: green; color: white; padding: 0 5px; >input[type="checkbox"] + label:before 
Styling Labels for Checked Inputs using CSS
 
 Option 1 
 Option 2 
 Option 3 
 Checkbox 1 
 Checkbox 2 
 Checkbox 3 
   

Conclusion

Styling labels of the input elements like radio buttons and checkboxes using CSS is a important tool for improving the user experience of web forms in web application. In this article, we have learned the different methods available for styling labels, including using the :checked selector, :before and :after pseudo-elements, and combining selectors with different properties. By applying custom styles to the labels of checked radio buttons and checkboxes, users can easily identify their selected options. The styling methods learned in this article can help create more intuitive and user-friendly forms in our web application which will enhance the overall usability of the website.

Источник

How to Style the Selected Label of a Radio Button

First of all, you need to hide the initial circular buttons by setting the CSS display property to «none». Then, style the labels in the way you want them to be by default when they aren’t selected. In our example, we set the display of our labels to «inline-block» and then continue styling by setting the background-color, padding, font-family, font-size, and cursor properties.

After that, you can style the selected element differently. Use the CSS :checked pseudo-class and the adjacent sibling selector (+). This will apply to any label that directly follows a checked radio button.

Example of styling a selected label of the radio button:

html> html> head> title>Title of the document title> style> .radio-button input[type="radio"] < display: none; > .radio-button label < display: inline-block; background-color: #d1d1d1; padding: 4px 11px; font-family: Arial; font-size: 18px; cursor: pointer; > .radio-button input[type="radio"]:checked+label < background-color: #76cf9f; > style> head> body> div class="radio-button"> input type="radio" id="radio1" name="radios" value="all" checked> label for="radio1">Books label> input type="radio" id="radio2" name="radios" value="false"> label for="radio2">Snippets label> input type="radio" id="radio3" name="radios" value="true"> label for="radio3">Quizzes label> div> body> html>

Result

In our next example, we add a margin to the «radio-button» class, then hide the circular buttons but differently from the previous example. For that, we set the opacity and width properties to 0, and use the «fixed» value of the position property.

For accessibility reasons, we change the appearance when a button gets focus, thus making the focused border dashed. This technique will also allow changing selection with the left and right arrows. We also add a hover effect with the CSS :hover pseudo-class so that when you hover over other options, they change the appearance.

Example of styling a selected label of the radio button with a hover effect:

html> html> head> title>Title of the document title> style> .radio-button < margin: 15px; > .radio-button input[type="radio"] < opacity: 0; position: fixed; width: 0; > .radio-button label < display: inline-block; background-color: #d1d1d1; padding: 10px 20px; font-family: sans-serif, Arial; font-size: 16px; border: 1px solid #666; border-radius: 4px; > .radio-button label:hover < background-color: #b1e3c1; > .radio-button input[type="radio"]:focus + label < border: 2px dashed #666; > .radio-button input[type="radio"]:checked + label < background-color: #76cf9f; border-color: #666; > style> head> body> div class="radio-button"> input type="radio" id="radio1" name="radios" value="all" checked> label for="radio1">Books label> input type="radio" id="radio2" name="radios" value="false"> label for="radio2">Snippets label> input type="radio" id="radio3" name="radios" value="true"> label for="radio3">Quizzes label> div> body> html>

Источник

:checked

The user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.

Note: Because browsers often treat s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser.

Syntax

Examples

Basic example

HTML

div> input type="radio" name="my-input" id="yes" value="yes" /> label for="yes">Yeslabel> input type="radio" name="my-input" id="no" value="no" /> label for="no">Nolabel> div> div> input type="checkbox" name="my-checkbox" id="opt-in" /> label for="opt-in">Check me!label> div> select name="my-select" id="fruit"> option value="opt1">Applesoption> option value="opt2">Grapesoption> option value="opt3">Pearsoption> select> 

CSS

div, select  margin: 8px; > /* Labels for checked inputs */ input:checked + label  color: red; > /* Radio element, when checked */ input[type="radio"]:checked  box-shadow: 0 0 0 3px orange; > /* Checkbox element, when checked */ input[type="checkbox"]:checked  box-shadow: 0 0 0 3px hotpink; > /* Option elements, when selected */ option:checked  box-shadow: 0 0 0 3px lime; color: red; > 

Result

Toggling elements with a hidden checkbox

This example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using JavaScript.

HTML

input type="checkbox" id="expand-toggle" /> table> thead> tr> th>Column #1th> th>Column #2th> th>Column #3th> tr> thead> tbody> tr class="expandable"> td>[more text]td> td>[more text]td> td>[more text]td> tr> tr> td>[cell text]td> td>[cell text]td> td>[cell text]td> tr> tr> td>[cell text]td> td>[cell text]td> td>[cell text]td> tr> tr class="expandable"> td>[more text]td> td>[more text]td> td>[more text]td> tr> tr class="expandable"> td>[more text]td> td>[more text]td> td>[more text]td> tr> tbody> table> label for="expand-toggle" id="expand-btn">Toggle hidden rowslabel> 

CSS

/* Hide the toggle checkbox */ #expand-toggle  display: none; > /* Hide expandable content by default */ .expandable  visibility: collapse; background: #ddd; > /* Style the button */ #expand-btn  display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; > /* Show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable  visibility: visible; > /* Style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn  background-color: #ccc; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Источник