Question

我正在尝试实施此网站上展示的Checkbox Four：http://www.paulund.co.uk/playground/demo/css-style-checkboxes/

我想通过在未选中时添加红色文本“N”来修改此复选框，并在选中时添加蓝色文本“Y”。

我到目前为止的代码是：

input[type=checkbox] 
{
    visibility: hidden;
} 


.checkboxFour 
{
    width: 40px;
    height: 40px;
    background: #ddd;
    margin: -30px 160px;

    border-radius: 100%;
    position: relative;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.checkboxFour label 
{
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 100px;

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;

    background: #333;

    -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

.checkboxFour input[type=checkbox]:checked + label {
    background: #CC0000;
}

Answer 1

您可以通过伪元素

轻松完成

可能是这样的：））

.checkboxFour  label:before {
    content:'N';
    color:red;
    display: block;
    padding: 5px;
    text-align: center;
}

.checkboxFour input[type="checkbox"]:checked + label:before {
    content:'Y';
    color:blue;
}

http://jsfiddle.net/E67n6/8/

使用CSS设置样式复选框（需要进一步的帮助）

1 个答案: