«Легкий переключатель» для переключения цвета текста и фона для полной страницы с использованием CSS.

Я пытаюсь создать «переключатель света» с помощью CSS для переключения цветов страницы. Я плохо начал, используя отличный ответ Джо на этот вопрос: Change фон при нажатии кнопки, используя только CSS?

Можно ли настроить таргетинг на всю страницу, а не на содержимое внутри div? Кроме того: могу ли я сделать что-нибудь еще, чтобы замаскировать кнопку как ссылку?

http://jsfiddle.net/gd4dma64/

HTML:

<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div>This works...</br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

CSS:

body, a {
    color: #000
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}

Спасибо за внимание - и извините, я действительно наивен.


button checkbox html css pseudo-class
person Suresure    schedule 25.04.2015    source источник
comment
насколько я знаю, псевдокласс должен быть только дочерним... согласитесь ли вы на javascript, родной для браузера....   -  person Careen    schedule 25.04.2015
comment
Спасибо, Карин - я думал, что это может оказаться ответом! Знаете, как бы я поступил?   -  person Suresure    schedule 25.04.2015
comment
Ответ qtgye здесь - это версия javascript: stackoverflow.com/a/28357455/1490943 я в итоге использовал.   -  person Suresure    schedule 27.04.2015
comment
@Suresure, что любое из приведенных ниже чистых решений css работает для вас? удивительно, что вы выбрали решение js, которое вы даже не пометили своим вопросом.   -  person Stickers    schedule 27.04.2015
comment
Спасибо, sdcr - я попытался объединить их (ваш фон ‹div› плюс другой ответ для переключения текста), и результат работает в Chrome и Firefox, но не в Safari. Также немного неудобно располагать переключатель вне ‹div›, а не внутри текста. Извините, ваше решение приблизило меня к этому... Не думаю, что у меня хватит навыков, чтобы справиться с этим. Вот что я получил: jsfiddle.net/wgqpnqdp/2   -  person Suresure    schedule 28.04.2015

Ответы (2)


arrow_upward
1
arrow_downward

Эй, вы должны изменить свой CSS следующим образом:

 input[type="checkbox"]:checked + label +div,
input[type="checkbox"]:checked + label +div>a
,input[type="checkbox"]:checked+label {
    background: #000;
    color: #fff;
}

И такой html:

<input type="checkbox" id="check" />
<label for="check" class="lights">Click here to invert colours</label>
<div>This works...<br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>
person Fabrice Kabongo    schedule 25.04.2015

arrow_upward
1
arrow_downward

Вы можете сделать <div> как position:absolute страницу мудрой и установить z-index:-1; так, чтобы она находилась под вашим обычным содержимым.

body, a {
    color: #666;
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}
/*added code below*/
body {
    margin: 0;
}
div {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
}
<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div></div>

person Stickers    schedule 25.04.2015