how to style a checkbox -css

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

<label>
  <input  type="checkbox" 
         ng-model="employer.isCurrentlyEmployed">
             current
       </label>
  </div>

Open in new window

Thanks
chand pbAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
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.

CSS
<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 {
  cursor:pointer;
}
.icon.female {
  background-position: 0 -60px;
}
input:checked + .icon.male {
  background-position: 0 -30px;
}
input:checked + .icon.female {
  background-position: 0 -90px;
}
</style>

Open in new window

HTML
  <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
0
 
Mayur AgarwalConnect With a Mentor Commented:
Please try this:-
Include this in CSS
label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 20px;
    height: 25px;
    padding: 0;
    margin:0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

Open in new window


HTML:-
<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.