Стилизация checkbox, как лучше сделать?

Question

[PhpNub]

Вот что у меня получилось


Совсем не то... Надо что бы вот так было... Этот состояние. Выбран или нет.

Как сделать что бы при простом стоянии было одно слово, а при отмеченным уже другое ?
Использовать псевдо с контейнером ? Не представляю как решить эту задачу(

Answer 1

[Евгений Петров]

Аха. Опять эти ребята. Я делаю уличную магию. Особую. Хотите увидеть немного магии?

Comments

[PhpNub]

А чисто на css нельзя ?
Я подумал о таком как <input><span>отметить</span><span>снять</span> и уже к примеру с помошью псевдо класса и вот таких конструкций input+span переключать... с использование z-index, получится ? или пустая трата времени и даже не стоит пытать реализовать.

[Евгений Петров]

@PhpNub а код посмотреть нельзя?)) Я в шоке от современных кодеров... Им пример сделали, а они даже в готовом разобраться не могут...

Специально же написал в Info, что скрипт только для переключения вида, дабы не писать 7-8 одинаковых форм.

Раз вы так и не смогли догадаться, что же делает скрипт, поясню здесь — берёте форму, CSS и ставите в форме классы. Что делает каждый набор классов, я думаю, ясно из примера.

Скрипт для одного вида формы вам не нужен.

[PhpNub]

Я понял, просто реализовать по другому хочу. Поддержку хотя бы от ie8 сделать

[PhpNub]

@Petroveg А можете ответить на вопрос
К примеру есть конструкция(код вымышленный просто для примера)

<div class="class">
<input id="id">
</div>

Если делать вот так
.class + #id{тут код}
то он не срабатывает
А если вот так
div+input{}
Почему 1й вариант не работает ? даже псевдо классы срабатывают, а классы и айди не хотят

[Евгений Петров]

@PhpNub вы отличаете контекстный селектор от соседского (ну примерно так можно интерпретировать siblings)? Я уже хотел сворачиваться с ответами, теперь точно понимаю — пора.

[Юрий Лобанов]

@Petroveg а заказчиков-то как жаль, представляешь, что им вот такие ребята верстают сайты.

Answer 2

[Maksim Zverev]

Один из вариантов

if($("#id").is(':checked')) {
    $("#id span").text("Hide");
  }
  else {
    $("#id span").text("Show");
  }

Comments

[PhpNub]

А чисто на css нельзя ?

[Maksim Zverev]

@PhpNub Если нужна поддержка старых IE то нет.

[PhpNub]

@m1skam ну до 8ки хватит

[Maksim Zverev]

@PhpNub Решение на чистом CSS ваш выше написал Petroveg, для полнофункционального понижения версии IE надо ставить JS библиотеку, что опять возвращает нас к JS :)

[PhpNub]

А легких библиотек нету ? до 10 кб...
Ну или на ванильном js ?

Answer 3

[wdtime_ru]

читайте на здоровье про стилизацию чекбоксов