在自定义复选框的跨度顶部放置标签答案

【问题标题】：Place a label on top of a span for a custom checkbox在自定义复选框的跨度顶部放置标签
【发布时间】：2014-02-04 05:47:31
【问题描述】：

我正在尝试构建一组自定义复选框，这些复选框在选中时会更改标签颜色和背景。

基本上我试图综合这两个想法：

1) 将数字放在圆圈内How to use CSS to surround a number with a circle?

2) 使用 span 和 ":checked" 属性创建自定义复选框 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>

【问题讨论】：

很好的回应。现在唯一的问题是数字居中的跨浏览器问题 - Chrome、Firefox、IE 等的 line-height 似乎不同。

标签： html css checkbox label

【解决方案1】：

将数字放在<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;
}

【讨论】：

【解决方案2】：

这是您想要实现的目标吗？ http://jsfiddle.net/Cg9eX/1/

我已将号码放在<span> 标签内。

【讨论】：