Поместите ярлык поверх пролета для пользовательского флажка.

Question

Я пытаюсь создать набор пользовательских флажков, которые меняют цвет и фон ярлыков при проверке.

По сути я пытаюсь синтезировать эти две идеи:

1) положить ряд внутри круга How to use CSS to surround a number with a circle?

2) создание пользовательских флажков с помощью пролеты и «: проверил» атрибут http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

До сих пор я не мог понять, как получить ярлык, контролируемый состоянием «: checked», чтобы сидеть в середине флажка.

Вот мой прогресс до сих пор: 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> 

Answer 1

Это то, что вы пытаетесь достичь? http://jsfiddle.net/Cg9eX/1/

Я разместил номер внутри тегов <span>.

Answer 2

Размещение номера внутри <span> решает большую часть проблемы.

Отрегулируйте line-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; 
}