Saturday , February 16 2019
Home / Website Designing / How to customize/style an input checkbox in CSS

How to customize/style an input checkbox in CSS

checkbox in pure css

I will show you that how you can design an input checkbox in CSS that will look beautiful and nice. In these days most of people and companies want the designers to design every single thing and the input checkbox is the one the most important element preferred for design. There are more tags that can be designed and people want it to be designed i-e radio button and stuff like these. We will design it with pure CSS and learn that how we can design different HTML elements with pure CSS. In this example, we will design an input checkbox like a circle and when the checkbox is checked it will have an orange background with the white tick. The basic structure we will use will be a div and inside this div will be an input and a label. First, we will design the checkbox class and then hide the actual input tag. Actually, we will use the label to be shown when the checkbox is checked. Before learning that how to style an input checkbox using CSS you will learn some CSS properties so you will understand the code better.

What will you learn?

This question is always in the mind of education seekers that on the topic he is spending his time will give him some benefit or not. So you are in the right place because you will learn different CSS(Cascading Style Sheet) properties and you will master up these properties in simple words.

Before designing an input checkbox in CSS understand these properties so you will not get confused.

Here is the list what you will learn in this article:

 

  1. Selectors i-e(class and id)
  2. width and height of the element
  3. position
  4. color and background color
  5. border and border radius
  6. the pseudo element of classes i-e(after and before)
  7. input and how to select any input type manually in CSS
  8. opacity of element
  9. transform i-e(rotate,rotate3d) etc.
  10. left and top properties of an element

Here I have explained every property we discussed above in very simple words.

  1. Selectors

Why we use Selectors? 

In CSS (Cascading Style Sheet) we use selectors to target a specific element. we can directly target element by tag name but there is a problem with it. For Example, if we target h3 in style sheet and define styles for it then the styles will be applied to all the h3 tags in the page. That is why we use Selectors. Now there are two types of selectors i-e class and id. There is no difference between these too, but a little different. ID is commonly used with JavaScript and the class is usually used with CSS.

How to use class or id to target a special element?

Here is the example that how we use selectors to target a specific tag. If we want to use the class then we have to put the class attribute in that element which we

want to style and if we want to use id then we have to put id attribute to that element.

 

Syntax:

<element class=”something”></element>,

<element id=”something”></element>

 

Example of Class:

<h4 class=”headingFour”>This element will get the style properties which we will define in class(headingFour)</h4>

Example of Id:

<p id=”description”>This element will get the style properties which we will define in id(description)</p>

 

How to use class and id to define CSS styles in style tag OR in style sheet document? To use Class: If we want to use a class to target an element with the attribute  of a class,

 

Syntax:

 

.classname{

styles will go here

}

 

To use Id:

If we want to use an Id to target an element with the attribute of ID,

 

Syntax:

 

#idofelement{

styles will go here

}

 

NOTE: For targeting a class we use dot(.) before the name of the class in CSS and for id we use sharp(#) or whatever you say it.

  1. Width and Height of an Element

Width and Height specify the area of the element. We can use width to make the element horizontally wider and height to make it vertically larger.

 

Syntax:

 

.classname OR #id {

width: 50px;

height: 50px;

}

 

Example:

.heading{

width: 50px;

height: 50px;

}

 

NOTE: Width in pixels is static and is not responsive. In order to make the element responsive, we use percentage instead of pixels.

  1. Position

The position is used to give the element position with respect to its surrounding.

There are four values for position property:

  • static
  • fixed
  • relative
  • absolute

Static:

It is the default value for the position of an element.

fixed:

It is used to make an element fixed in the page according to its surrounding

relative:

It is used to give an element position relative to another element.

absolute:

It is used to give an element position relative to its parent.

NOTE: In order to give an element position absolute we have to give its parent position of relative. If we do not give its parent-relative position then it will flow of out of the parent element.

Example:

<div class=”parent”>

<div class=”child”></div>

</div>

 

CSS:

 

.parent{

position: relative;

width: 100px;

height: 100px;

background-color: #ff0000;

}

.child{

position: absolute;

width: 80px;

heigh: 80px;

top: 5px;

left: 5px;

background-color: #00ff00;

}

  1. color and background color:

Color is used to set the color of contents of an element while background color is used to set the background color of an element itself.

For Example:

Here is a div with class of element and it contains some text,

 

<div class=”element”>

Hello world!

</div>

 

CSS:

 

.element{

background-color: #ccc;

color: #333;

}

 

We have defined that an element having class element will have background-color and color.

NOTE: if you are writing the CSS in HTML page then you have to use style tag in the head section and write your CSS in between the style tag.

  1. border and border-radius:

The border is a line around an element. It has the following values,

 

Syntax:

  • border-width: value;
  • border-color: value;
  • border-style: value;

OR

  • border : width style color;

 

 

Border radius means that how to corners are to be smooth.

 

Syntax:

.element{

Border-radius: value;

}

 

NOTE: You can use pixels and other measurement units

 

  1. pseudo elements i-e after and before etc

 

Pseudo elements are used to add elements after or before the element.

 

Syntax:

.classname::before{

Styles goes here…

}

 

OR

 

#id::after{

Codes goes here….

}

 

You can see the use of pseudo-elements in the tutorial.

 

 

  1. input and how to select any input type manually in CSS

 

There are many types of input tag. We can target each of them by referring there type in CSS selector.

For selecting any type of input in CSS we have to write input and after that, within brackets, we will write the type of the input.

 

Syntax:

 

Input[type=”write the type of input here ”]{

Codes will go here …

}

 

Example:

Input[type=”text”]{

width: 100px;

height: 100px;

}

 

NOTE: We can target any type of input and style it.

 

 

  1. Opacity of Element

 

The opacity of the element means that how much the element is transparent. Its value ranges from 0 to 1. You can make any element transparent with opacity element.

 

Syntax:

 

.classname OR #id {

opacity: 1;

}

 

OR

 

.classname OR #id {

opacity: 0;

}

 

 

  1. transform i-e(rotate,rotate3d) etc

 

By using transform property we can rotate an element, rotate an element 3d etc.

 

Syntax:

 

.classname {

Transform: rotate(46deg);

}

 

 

  1. left and top properties of an element

 

These are the properties with the help of which we can set the margin-left of an element and top

 

For Example:

 

Syntax:

 

.classname {

position: absolute;

top: 30px;

left: 40px;

}

 

 

I hope you enjoyed learning the above properties.

 

 

Now coming to our main topic that how to customize an input checkbox using CSS.

 

For that purpose here is the HTML code,

Here is a div with the class checkbox which we will design it as a background to the checkbox.

After that in checkbox class, there is an input with type is equal to checkbox and id of checkbox1 also a label for checkbox1.

We will use label to design it for checked checkbox.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>

</head>
<body>

<div class=”checkbox”>
<input type=”checkbox” id=”checkbox1″>
<label for=”checkbox1″></label>
</div>

</body>
</html>

 

 

This is the CSS code, Write it down in the CSS file or Put it in the style tag in head section in above code

.checkbox{
width: 40px;
height: 40px;
background-color: #ddd;
position: relative;
border-radius: 100%;
cursor:pointer;
border: 1px solid #888;
}

.checkbox input[type=”checkbox”]{
visibility: hidden;
}

.checkbox label{
width: 38px;
height: 38px;
background-color: #cc6d14;
position: absolute;
border-radius: 100%;
left: 1px;
top: 1px;
opacity: 0;
cursor:pointer;
}

.checkbox label:before{
content: ”;
width: 9px;
height: 5px;
border: 1px solid #fff;
position: absolute;
top:14px;
left: 14px;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}

.checkbox input[type=”checkbox”]:checked + label{
opacity: 1;
}

 

 

I hope you will get the idea of the checkbox. Thanks for reading. You can give the rating to this article. Also, check our other articles:

How to customize/style an input checkbox in CSS
4.3 (85%) 4 votes