Чекбокс Styling с CSS (необходима дополнительная помощь)

Question

Чекбокс Styling с CSS (необходима дополнительная помощь)

0

Я пытаюсь реализовать 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;
}

Black 03 дек. 2013, в 05:02

Источник

Теги:

javascript

html

css

checkbox

1 ответ

Ещё вопросы

Hovhannes Sargsyan · Answer 1 · 2013-12-03T01-47-00.000Z

Вы можете легко сделать это через psuedo-elements

может быть так :))

.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/

Это добавляет красный N к флажку, если я добавляю метку: после и изменяю это, чтобы отобразить Y, я должен буду преобразовать от до до после где-нибудь еще в коде? Редактировать: Шучу, я видел вашу ссылку. Спасибо