Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Style Label for Selected Radio Input and Checked Checkboxes Using CSS
To style label associated with selected radio input and checked checkboxes using CSS, is important task in forms as it makes it easy to identify the option selected by user. In this article, we will understand how to style label associated with selected radio input and checked checkboxes using CSS using :checked psuedo class selector and CSS combinators.
We are having three radio buttons and three checkboxes, our task is to style label associated with selected radio input and checked checkboxes using CSS.
Styling Label of Checked Radio Button and Checkboxes
- We have created three radio buttons using input tag with type attribute as radio and three check boxes using type attribute as checkbox.
- Then, we have created label for each radio button and checkbox using label tag.
- We have used "input[type="radio"]:checked" which selects all the checked radio buttons.
- After that we have used, "+label" with previous step which selects the label of corresponding checked radio button.
- Similarly, we have used "input[type="checkbox"]:checked+label" which selects the label of corresponding Checked checkbox.
- At last, we have used CSS background-color, color and font-weight properties which sets the background of label to green with white and bold text.
Example 1
Here is a complete example code implementing above mentioned steps to style label associated with selected radio input and checked checkboxes using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To style label associated with selected
radio input and checked checkboxes using
CSS
</title>
<style>
.radio_button input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
background-color: #04af2f;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h3>
To style label associated with selected
radio input and checked checkboxes using
CSS
</h3>
<p>
In this example we have used <strong>checked
</strong> psuedo-class selector to style label
for checked radio and checkboxes using CSS.
</p>
<div class="radio_button">
<input type="radio" id="option1" name="options" />
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="options" />
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="options" />
<label for="option3">Option 3</label>
<br>
<input type="checkbox" id="option4" name="options" />
<label for="option4">Option 4</label>
<br>
<input type="checkbox" id="option5" name="options" />
<label for="option5">Option 5</label>
<br>
<input type="checkbox" id="option6" name="options" />
<label for="option6">Option 6</label>
</div>
</body>
</html>
Example 2
This example only styles the label of checked radio button and checkboxes which you want to style. For this we have used general sibling combinator(~). Here style is applied to label of only option 1 and option 5.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To style label associated with selected
radio input and checked checkboxes using
CSS
</title>
<style>
.radio_button input[type="radio"]:checked
~label[for="option1"],
input[type="checkbox"]:checked~
label[for="option5"] {
background-color: #04af2f;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h3>
To style label associated with selected
radio input and checked checkboxes using
CSS
</h3>
<p>
In this example we have used <strong>checked
</strong> psuedo-class selector with sibling
combinator(~) to style label for selected radio
and checkboxes using CSS. Here <strong>option 1</strong>
and <strong>option 5</strong> will have change in style.
</p>
<div class="radio_button">
<input type="radio" id="option1" name="options"/>
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="options"/>
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="options"/>
<label for="option3">Option 3</label>
<br>
<input type="checkbox" id="option4" name="options"/>
<label for="option4">Option 4</label>
<br>
<input type="checkbox" id="option5" name="options"/>
<label for="option5">Option 5</label>
<br>
<input type="checkbox" id="option6" name="options"/>
<label for="option6">Option 6</label>
</div>
</body>
</html>
Conclusion
In this article, we understood how to style label associated with selected radio input and checked checkboxes using CSS with the help of CSS :Checked psuedo class selector and CSS combinators.
4K+ Views
