Place a label on top of a span for a custom checkbox

Question

I am trying to build a set of custom checkboxes that change label color and background when checked.

Essentially I am trying to synthesize these two ideas:

1) putting a number inside of a circle How to use CSS to surround a number with a circle?

2) creating custom checkboxes using spans and the ":checked" attribute http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

So far, I haven't been able to figure out how to get a label, controlled by the ':checked' state, to sit in the middle of the checkbox.

Here is my progress thus far: http://jsfiddle.net/Cg9eX/

css

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:30px;
    height:30px;
    margin: 0 4px 0 0;
    vertical-align:middle;
    background: none;
    cursor:pointer;
    line-height: 14px;
    text-align: center;
    border: solid 1px #000000;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

input[type="checkbox"]:checked + label span {
    background-color: rgba(153, 153, 153, .7);
    border: none;
}

input[type="checkbox"]:checked + label {
    color: white;
}


html

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>4</label>

Great responses. The only problem now is the cross-browser issue of centering the number - it seems that line-height is different for Chrome, Firefox, IE etc. — user2373062, Jan 15 '14 at 17:49

score 0 · Accepted Answer · answered Jan 15 '14 at 16:36

0

Is this what you're trying to achieve? http://jsfiddle.net/Cg9eX/1/

I have placed the number inside the <span> tags.

answered Jan 15 '14 at 16:36

Dan Johnson

1,480
17
36

score 0 · Answer 2 · answered Jan 15 '14 at 16:41

Placing the number inside the <span> solves most of the problem.

The adjust the line-height to the same as the element height.

JSFiddle Demo

HTML

<input type="checkbox" id="c1" name="cc" />
 <label for="c1"><span>4</span></label>

CSS

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:30px;
    height:30px;
    line-height:30px;
    margin: 0 4px 0 0;
    vertical-align:middle;
    background: none;
    cursor:pointer;
    text-align: center;
    border: solid 1px #000000;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

input[type="checkbox"]:checked + label span {
    background-color: rgba(153, 153, 153, .7);
    border: none;
}

input[type="checkbox"]:checked + label {
    color: green;
}

Place a label on top of a span for a custom checkbox

2 Answers2