Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
<html>
<head>
<title>Styling Labels for Checked Inputs using CSS</title>
<style>
input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h2>Styling Labels for Checked Inputs using CSS</h2>
<form>
<input type="radio" id="option1" value="option1">
<label for="option1">Option 1</label> <br>
<input type="radio" id="option2" value="option2">
<label for="option2">Option 2</label> <br>
<input type="radio" id="option3" value="option3">
<label for="option3">Option 3</label> <br>
<input type="checkbox" id="check1" value="option1">
<label for="check1">Checkbox 1</label> <br>
<input type="checkbox" id="check2" value="option2">
<label for="check2">Checkbox 2</label> <br>
<input type="checkbox" id="check3" value="option3">
<label for="check3">Checkbox 3</label>
</form>
</body>
</html>
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.
<html>
<head>
<title>Styling Labels for Checked Inputs using CSS</title>
<style>
input[type="radio"]:checked + label:before {
content: "\25CF";
margin-right: 8px;
background-color: blue;
}
input[type="checkbox"]:checked + label:before {
content: "\2611";
margin-right: 8px;
background-color: blue;
}
</style>
</head>
<body>
<h2>Styling Labels for Checked Inputs using CSS</h2>
<form>
<input type="radio" id="option1" value="option1">
<label for="option1">Option 1</label> <br>
<input type="radio" id="option2" value="option2">
<label for="option2">Option 2</label> <br>
<input type="radio" id="option3" value="option3">
<label for="option3">Option 3</label> <br>
<input type="checkbox" id="check1" value="option1">
<label for="check1">Checkbox 1</label> <br>
<input type="checkbox" id="check2" value="option2">
<label for="check2">Checkbox 2</label><br>
<input type="checkbox" id="check3" value="option3">
<label for="check3">Checkbox 3</label>
</form>
</body>
</html>
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.
<html>
<head>
<title>Styling Labels for Checked Inputs using CSS</title>
<style>
input[type="radio"] + label:before {
content: "\25CF";
margin-right: 5px;
background-color: green;
color: white;
padding: 0 5px;
}
input[type="checkbox"] + label:before {
content: "\2610";
margin-right: 5px;
background-color: green;
color: white;
padding: 0 5px;
}
</style>
</head>
<body>
<h2>Styling Labels for Checked Inputs using CSS</h2>
<form>
<input type="radio" id="option1" value="option1">
<label for="option1">Option 1</label> <br>
<input type="radio" id="option2" value="option2">
<label for="option2">Option 2</label> <br>
<input type="radio" id="option3" value="option3">
<label for="option3">Option 3</label> <br>
<input type="checkbox" id="check1" value="option1">
<label for="check1">Checkbox 1</label><br>
<input type="checkbox" id="check2" value="option2">
<label for="check2">Checkbox 2</label> <br>
<input type="checkbox" id="check3" value="option3">
<label for="check3">Checkbox 3</label>
</form>
</body>
</html>
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.
2K+ Views
