Adding stylish checkboxes in HTML as well as buttons can be done very easily by using the CSS. There are actually two methods of creating stylish checkboxes. One method is image based and another method is based purely on CSS. However, here we will discuss both methods of adding stylish checkboxes.
Image based styling of checkboxes will allow excellent flexibility. Moreover, the appearance will be flexible as well. In this example, we will actually combine three images of three different states. Those states will be ‘selected radio button’, ‘unchecked’ along with ‘selected checkbox’.
The HTML of following form is going to be used for each radio button or checkbox.
<div> <input id="option" type="checkbox" name="field" value="option"> <label for="option">Value</label> </div>
In the style-sheet, we will be hiding the radio buttons as well as checkboxes.
input[type=checkbox]:not(old),
input[type=radio ]:not(old){
width : 28px;
margin : 0;
padding : 0;
opacity : 0;
}
In the line 1 and line 2, selectors use negation pseudo-class for hiding the rules from the older browser. Line 3, 4, 5 is used for setting margin, padding and width. Line 6 has been used for rendering the standard user interface by setting the opacity. After that, we can now do the positioning of the label and displaying of any unchecked image. Here is the coding:
input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -28px;
padding-left : 28px;
background : url('checks.png') no-repeat 0 0;
line-height : 24px;
}
input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -28px;
padding-left : 28px;
background : url('checks.png') no-repeat 0 0;
line-height : 24px;
}
At last, when the radio buttons as well as checkboxes are selected, we will be able to display the selected images.
input[type=checkbox]:not(old):checked + label{
background-position : 0 -24px;
}
input[type=radio]:not(old):checked + label{
background-position : 0 -48px;
}
input[type=checkbox]:not(old):checked + label{
background-position : 0 -24px;
}
input[type=radio]:not(old):checked + label{
background-position : 0 -48px;
}
As we have combined images of various states into one image, the rules will modify background position for showing appropriate image.
However, now we will be discussing the pure CSS styling. It will be also be scaled with the size of text.
The HTML coding will be same for all checkboxes.
<div> <input id="option" type="checkbox" name="field" value="option"> <label for="option"><span><span></span></span>Value</label> </div> <div> <input id="option" type="checkbox" name="field" value="option"> <label for="option"><span><span></span></span>Value</label> </div>
The span is used for creating the alternative graphics. Both spans are required for radio buttons, in case of checkboxes only one is needed. However, now we have to hide the radio buttons as well as checkboxes from the style-sheet. Here is the coding.
input[type=checkbox]:not(old),
input[type=radio ]:not(old){
width : 2em;
margin : 0;
padding : 0;
font-size : 1em;
opacity : 0;
}
input[type=checkbox]:not(old),
input[type=radio ]:not(old){
width : 2em;
margin : 0;
padding : 0;
font-size : 1em;
opacity : 0;
}
After that, we need to position the label. The coding is here.
input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -2em;
line-height : 1.5em;
}
input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -2em;
line-height : 1.5em;
}
Now, we have to style the first span for creating unchecked graphics.
input[type=checkbox]:not(old) + label > span,
input[type=radio ]:not(old) + label > span{
display : inline-block;
width : 0.875em;
height : 0.875em;
margin : 0.25em 0.5em 0.25em 0.25em;
border : 0.0625em solid rgb(192,192,192);
border-radius : 0.25em;
background : rgb(224,224,224);
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align : bottom;
}
input[type=checkbox]:not(old) + label > span,
input[type=radio ]:not(old) + label > span{
display : inline-block;
width : 0.875em;
height : 0.875em;
margin : 0.25em 0.5em 0.25em 0.25em;
border : 0.0625em solid rgb(192,192,192);
border-radius : 0.25em;
background : rgb(224,224,224);
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align : bottom;
}
On the selected checkboxes as well as radio buttons, the background gradient is reversed.
input[type=checkbox]:not(old):checked + label > span,
input[type=radio ]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
input[type=checkbox]:not(old):checked + label > span,
input[type=radio ]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
After that, we need to display one tick inside the selected checkboxes.
input[type=checkbox]:not(old):checked + label > span:before{
content : '✓';
display : block;
width : 1em;
color : rgb(153,204,102);
font-size : 0.875em;
line-height : 1em;
text-align : center;
text-shadow : 0 0 0.0714em rgb(115,153,77);
font-weight : bold;
}
input[type=checkbox]:not(old):checked + label > span:before{
content : '✓';
display : block;
width : 1em;
color : rgb(153,204,102);
font-size : 0.875em;
line-height : 1em;
text-align : center;
text-shadow : 0 0 0.0714em rgb(115,153,77);
font-weight : bold;
}
At last, we have to display the ‘bullet’ within the selected radio button. There will be application of the same techniques as it has been for unchecked graphics to 2nd span element. Here is the coding:
input[type=radio]:not(old):checked + label > span > span{
display : block;
width : 0.5em;
height : 0.5em;
margin : 0.125em;
border : 0.0625em solid rgb(115,153,77);
border-radius : 0.125em;
background : rgb(153,204,102);
background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : linear-gradient(rgb(179,217,140),rgb(153,204,102));
}
input[type=radio]:not(old):checked + label > span > span{
display : block;
width : 0.5em;
height : 0.5em;
margin : 0.125em;
border : 0.0625em solid rgb(115,153,77);
border-radius : 0.125em;
background : rgb(153,204,102);
background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : linear-gradient(rgb(179,217,140),rgb(153,204,102));
}
Now we will discuss how we can add text fields. Addition of text field is pretty simple in relation to the checkboxes and radio buttons. The coding and result are given below.
<input class="textbox"type="text"> <input class="textbox"type="text"> <input class="textbox"type="text">
.textbox {
border: 1px dotted #000000;
outline:0;
height:25px;
width: 275px;
}
<input class="textbox"type="text"> <input class="textbox"type="text"> <input class="textbox"type="text">
.textbox {
border: 1px dotted #000000;
outline:0;
height:25px;
width: 275px;
}