DEV Community

Discussion on: Set a Cookie with CSS

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

Cute. But when does the url resolve and the cookie get set? e.g. for

#dark-mode:checked~main [for="dark-mode"]::after {content: url('/?a=dark-mode')}

is it the first time the #dark-mode element gets checked?

Collapse
 
astrit profile image
Astrit • Edited

If I understand correctly what you said, yes the cookie is set on the first time so as soon it is checked the the cookie is set.

To unset it you could do:

#dark-mode:checked:active~main [for="dark-mode"]::after {content: url('/?a=light')}

Or if you want to play a bit more clean and you set appearance to none on input you can use the content url directly on input.

#inputId:checked::after { content: url('/?action=action-name') }

/*

This requires the #inputId to have 
appearance:none; or -webkit-appearance:none;

*/

Or if you feel a bit snazzy you can set the cookie even as background-image, I have tested and it works.

#dark-mode:checked {background-image: url('/?action=action-case')}