how to style a checkbox -css

Need some help to style the default checkbox . I would like to make the checkbox bigger and align the label to middle

  <input  type="checkbox" 

Open in new window

chand pbAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mayur AgarwalCommented:
Please try this:-
Include this in CSS
label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
input {
    width: 20px;
    height: 25px;
    padding: 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;

Open in new window

        <label><input type="checkbox" /> Label text</label>

Open in new window

Julian HansenCommented:
Checkboxes cannot be styled - however you can create a custom checkbox that uses an image linked to the state of a hidden checkbox.

The principle is as follows (and requires only CSS)
<input type="checkbox" name="cbname" id="cbname>
<label for="cbname"></label>

In CSS we can set the style on the lable based on the state of the checkbox using the sibling operator (+) and the pseudo class (checked)
input + label {
   /*style the label for the unchecked state*/
input:checked + label {
   /* Style the label for the checked state */

Open in new window

By adding classes to the label (or the input) we can target specific labels and set a background image on the label representing the state of a checkbox. This can be a larger, more styled check box or it can be another image or text

The samples below use images - but the images can be swapped for images of boxes designed according to your specifications.

<style type="text/css">
input[type="radio"] {
  display: none;
.icon {
  width: 30px;
  height: 30px;
  background-image: url(images/t2780.sprite.png);
  background-repeat: no-repeat;
.icon:hover {
.icon.female {
  background-position: 0 -60px;
input:checked + .icon.male {
  background-position: 0 -30px;
input:checked + .icon.female {
  background-position: 0 -90px;

Open in new window

  <input type="radio" name="gender" id="male" value="male">
  <label for="male" class="icon male"></label>
  <input type="radio" name="gender" id="female" value="female">
  <label for="female" class="icon female"></label>

Open in new window

This solution uses an image sprite (An image containing all images of all the checkbox  states) which is shifted (as a background) behind the styled lables to indicate the state of the checkbox.

You can see the above working here

Another example can be found here

The above samples use radio buttons but the principle remains the same for checkboxes

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.