使用CSS設置復選框樣式（需要更多幫助）

Question

我正在嘗試實現此網站上演示的復選框4： 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/