Question

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

基本上我正在尝试综合这两个想法：

1）将一个数字放在一个圆How to use CSS to surround a number with a circle?

中

2）使用spans和“：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>

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;
}

在标尺的顶部放置标签以显示自定义复选框

2 个答案: