0

Due to the way my radio and checkbox inputs are structured in html, I can't seem to be able to find a way to give them a very very simple custom styling.

Click here for the JSFiddle Can anyone please advice me? how can I give my radio and checkbox a custom pure CSS styling? After some research I have noticed that I can use http://www.csscheckbox.com/ but I don't want to use images.

How my inputs are structured? the input is simply wrapper with the label. Example: <label><input name="checkbox" type="checkbox" value="OptionB" class="required">OptionB</label>

  • possible duplicate of [How to style checkbox using CSS?](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) – Matt Ball Feb 15 '14 at 16:25

1 Answers1

0

Please look over here: http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

This should help:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background: green;
    border-radius: 10px;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background: blue;
}

HTML

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

If you want an inner or outer border you can use :before or after to create an extra element to create the border.

Niels
  • 44,106
  • 4
  • 55
  • 78
  • Also the input is inside the label - your option wont work for me mate –  Feb 15 '14 at 16:30
  • You can also use a span after the checkbox by using `input[type="checkbox"] + span` and `input[type="checkbox"]:checked + span` – Niels Feb 15 '14 at 21:15