CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS Checkbox style

CSS Checkbox style: It is an element of HTML, which is used to get input from various users. It is difficult to style any checkbox. However, some elements make it simple to design the checkbox, i.e., pseudo-elements.

Generally, these HTML elements are used on all the websites. However, without applying any style, these elements look the same on all the websites. Thus, styling them can create our website more attractive and different. We must hide the real checkbox to design the checkbox. It is a creative and interesting to style various checkboxes with the use of CSS. It will give a beautiful and a new view of any default checkbox.

Let’s consider some examples to clearly understand the checkbox stylish concept:

Example 1:

In the following example, we will use the '~’ symbol which is a sibling combinator. It selects every element that can be preceded by any previous selector. We should also apply a pseudo-class :hover for styling a checkbox if any user points the mouse over it.

<!DOCTYPE html> 
<html> 
<style> 
.container
{ 
  display: block; 
  position: relative; 
  padding-left: 35px; 
  margin-bottom: 20px; 
  cursor: pointer; 
  font-size: 25px; 
} 
/* Hide the default checkbox */ 
.container input
{ 
  visibility: hidden; 
  cursor: pointer; 
} 
/* Create a custom checkbox */ 
.mark
{ 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 25px; 
  width: 25px; 
  background-color: lightgray; 
} 
.container:hover input ~ .mark
{ 
  background-color: gray; 
} 
.container input:checked ~ .mark
{ 
  background-color: blue; 
} 
/* Create the mark/indicator (hidden when not checked) */ 
.mark:after
{ 
  content: ""; 
  position: absolute; 
  display: none; 
} 
/* Show the mark when checked */ 
.container input:checked ~ .mark:after
{ 
  display: block; 
} 
/* Style the mark/indicator */ 
.container .mark:after
{ 
  left: 9px; 
  top: 5px; 
  width: 5px; 
  height: 10px; 
  border: solid white; 
  border-width: 0 3px 3px 0; 
  transform: rotate(45deg); 
} 
</style> 
<body> 
<h1>Qualification</h1> 
<label class="container">M.tech 
  <input type="checkbox"> 
  <span class="mark"></span> 
</label> 
<label class="container">B.tech
  <input type="checkbox"> 
  <span class="mark"></span> 
</label> 
<label class="container">12th 
  <input type="checkbox"> 
  <span class="mark"></span> 
</label> 
<label class="container">10th 
  <input type="checkbox" checked="check"> 
  <span class="mark"></span> 
</label> 
</body> 
</html> 

Output:

CSS Checkbox style

Example 2:

In the following example, we will see a modified checkmark.

<!DOCTYPE html> 
<html> 
<style> 
.container
{ 
  display: block; 
  position: relative; 
  padding-left: 45px; 
  margin-bottom: 15px; 
  cursor: pointer; 
  font-size: 20px; 
} 
/* Hide the real checkbox */ 
input[type= checkbox]
{ 
  visibility: hidden; 
} 
/* Create a custom checkbox */ 
.mark
{ 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 25px; 
  width: 25px; 
  background-color: lightgray; 
} 
/*background color to be displayed if the checkbox is checked*/
.container input:checked ~ .mark
{ 
  background-color: blue; 
}  
/*checkmark to be displayed in the checkbox*/ 
/*It is bot displayed if unchecked*/
.mark:after
{ 
  content: ""; 
  position: absolute; 
  display: none; 
} 
/*display the checkmark when checked*/ 
.container input:checked ~ .mark:after
{ 
  display: block; 
} 
/*creating a square to be the sign of checkbox*/ 
.container .mark:after
{ 
  left: 6px; 
  bottom: 6px; 
  width: 6px; 
  height: 6px; 
  border: solid white; 
  border-width: 4px 4px 4px 4px; 
} 
</style> 
<body> 
<h1>Qualification</h1> 
<label class="container">M.tech 
  <input type="checkbox"> 
  <span class="mark"></span> 
</label> 
<label class="container">B.tech
  <input type="checkbox"> 
  <span class="mark"></span> 
</label>
<label class="container">12th 
  <input type="checkbox"> 
  <span class="mark"></span> 
</label> 
<label class="container">10th 
  <input type="checkbox" checked="check"> 
  <span class="mark"></span> 
</label> 
</body> 
</html> 

Output:

CSS Checkbox style

Example 3:                  

We will see another illustration of checkbox styling. In the following example, we feel a ripple consequence, which makes any checkbox more interesting. It will provide us a unique view to our checkbox. We are using the ‘~’ symbol which is a sibling combinator, similar as above examples. Every element will be selected by using this symbol preceded by a former selector. We can also apply some of the pseudo-classes like :checked, :before, :after, etc.

With the use of CSS, we are creating a ripple effect inside a checkbox as follows:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
 text-align: center;
}
.check
{
 width: 500px;
 margin: 50px auto;
 clear: both;
 display: block;
 background-color: #009BFF;
 border-radius: 4px;
}
.check::after
{
 clear: both;
 display: block;
 content: "";
}
.check .checkbox-container
{
 float: left;
 width: 50%;
 box-sizing: border-box;
 text-align:center;
 padding: 40px 0px;
}
/* Styling Checkbox Starts */
.checkbox-label
{
 color: white;
 display: block;
 position: relative;
 margin: auto;
 cursor: pointer;
 font-size: 22px;
 line-height: 24px;
 height: 50px;
 width: 24px;
 clear: both;
}
.checkbox-label input
{
 position: absolute;
 opacity: 0;
 cursor: pointer;
}
.checkbox-label .mark
{
 top:30px;
 position: absolute;
 height: 24px;
 width: 24px;
 background-color: transparent;
 border-radius: 5px;
 transition: all 0.3s ease-in;
 border: 2px solid white;
}
.checkbox-label input:checked ~ .mark
{
 background-color: white;
 border-radius: 5px;
 transform: rotate(0deg) scale(1);
 opacity:1;
 border: 2px solid white;
}
.checkbox-label .mark::after
{
 position: absolute;
 content: "";
 border-radius: 5px;
}
.checkbox-label input:checked ~ .mark::after
{
 transform: rotate(45deg) scale(1);
 left: 8px;
 top: 3px;
 width: 6px;
 height: 12px;
 border: solid red;
 border-width: 0 2px 2px 0;
 border-radius: 0;
}
/* For Ripple Effect */
.checkbox-label .mark::before
{
 position: absolute;
 content: "";
 border-radius: 10px;
 border: 5px solid yellow;
 transform: scale(0);   
}
.checkbox-label input:checked ~ .mark::before
{
 left: -3px;
 top: -3px;
 width: 24px;
 height: 24px;
 border-radius: 5px;
 transform: scale(3);
 opacity:0;  
 transition: all 0.3s ease-out;
}
</style>
</head>
<body>
<h1>Qualification</h1>
<div class="check">
<div class="checkbox-container">
<label class="checkbox-label">M.tech
  <input type="checkbox">
  <span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">B.tech
  <input type="checkbox">
  <span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">12th
  <input type="checkbox">
  <span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">10th
  <input type="checkbox" checked="check">
  <span class="mark"></span>
</label>
</div>
</div>
</body>
</html>

Output:

CSS Checkbox style



ADVERTISEMENT
ADVERTISEMENT