Ryan Seddon
* Stolen from food bloggers twitter bio
Stateful CSS, makes for something unexpected be extremely powerful
Original demo by Simurai
<input type="radio" name="opts" id="opts1"> <label for="opts1">Option</label>
Setup the styles to react to label clicks
input + label { background-position: 50px 0; } input:checked + label { background-position: 0 0; } input:checked ~ input + label { background-position: -50px 0; }
input + label { /* less interesting styles */ background-image: radial-gradient(hsla(200, 100%, 90%, 1) 0%, hsla(200, 100%, 70%, 1) 15%, hsla(200, 100%, 60%, 0.3) 28%, hsla(200, 100%, 30%, 0) 70%); border-radius: 25px; box-shadow: hsla(0, 0%, 100%, 0.15) 0 1px 1px, inset hsla(0, 0%, 0%, 0.5) 0 0 0 1px; transition: background-position 0.15s cubic-bezier(0.8, 0, 1, 1); }
<ol> <li> <input type="checkbox" checked id="folder1" /> <label for="folder1" onclick>Folder 1</label> <ol> <li>File</li> </ol> </li> ... more items </ol>
.tree li input:checked ~ ol { height: auto; padding: 0 0 0 35px; } .tree li label:after, .tree li label:before, .tree li input:checked ~ ol:before { background: url(icon-sprite.png) 0 0 no-repeat; content: ""; height: 14px; width: 14px; } .tree li input ~ ol > li { display: none; } .tree li input:checked ~ ol > li { display: block; }
<ul class="nav" role="navigation"> <li class="dropdown"> <input type="radio" name="dropdowns" id="dropdown1"> <label for="dropdown1" class="dropdown-toggle" onclick> Dropdown <b class="caret"></b> </label> <ul class="dropdown-menu" role="menu"> <li><a tabindex="-1" href="#">Action</a></li> ... more items </ul> <label for="dismissdd" class="dismiss-dd" onclick></label> </li> </ul> <input type="radio" checked id="dismissdd" name="dropdowns">
#dropdowns input[type="radio"] ~ .dismiss-dd { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; padding: 0 !important; background: transparent !important; line-height: 0; cursor: default; } #dropdowns input[type="radio"]:checked ~ .dropdown-menu, #dropdowns input[type="radio"]:checked ~ .dismiss-dd { display: block; }
<input type="radio" name="accordion-group" id="collapseAll"> <div class="accordion-group"> <input type="radio" id="collapse1" name="accordion-group" checked> <label for="collapseAll" class="accordion-dismiss"></label> <div class="accordion-heading"> <label for="collapse1" class="accordion-toggle">Heading #1</label> </div> <div id="collapseOne" class="accordion-body collapse"> <div class="accordion-inner"> ... </div> </div> </div>
#collapse .accordion input ~ .collapse { max-height: 0; height: auto; transition: max-height 0.2s ease 0s; } #collapse .accordion input:checked ~ .collapse { max-height: 500px; transition-duration: 0.7s; }
<input type="radio" id="foo" name="tabs"> <label onclick for="foo">Foo</label> //... more tabs <div class="tabs-container"> <div class="tab">...</div> //... more tab content </div>
.tabs input:nth-of-type(1):checked ~ .tab-content > :nth-of-type(1), .tabs input:nth-of-type(2):checked ~ .tab-content > :nth-of-type(2), .tabs input:nth-of-type(3):checked ~ .tab-content > :nth-of-type(3) { display: block; opacity: 1; }
<!-- Modal 1 --> <label class="btn" for="modal1" onclick>Launch ze modal</label> <input type="radio" id="modal1" name="modal" /> <div class="modal hide fade"> <div class="modal-header"> <label role="button" class="close" for="closemodal">√ó</label> <h3>Modal header</h3> </div> <div class="modal-body">...</div> <div class="modal-footer"> <label role="button" class="close" for="closemodal">Close</label> </div> </div> <!-- Overlay and close --> <input type="radio" id="closemodal" name="modal" /> <label for="closemodal" class="modalclose"> </label>
#modals input ~ .modal { left: 50%; margin: 0; top: 0; opacity: 0; transition: transform 0.3s ease-in, opacity 0.3s linear; transform: translate(-50%,-100%); } #modals input:checked ~ .modal { opacity: 1; transition-delay: 0.4s; transform: translate(-50%,20%); }
#modals input + .modalclose { transition: opacity 0.3s linear; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; opacity: 0; } #modals input:not(#closemodal):checked ~ .modalclose { opacity: 0.8; z-index: 1; background: #000; margin: 0 !important; transition-delay: 0; }
Or go to github and checkout the source code.
// Off input[type="checkbox"] ~ div { // Fancy styles } // On input[type="checkbox"]:checked ~ div { // Fancy styles }
Prior to Safari 5.1 & Chrome 13 this didn't work
<input type="checkbox" id="foo"> <label onclick="" for="foo">I need an onclick in iOS</label>
<=iOS5 will not update a checkboxes state when touching a label, but adding an onclick attribute works.
Confusing markup when consumed through a screenreader
* and by sometimes I mean most of the time...
Look at the Carousel CSS +/~ all over
#modal { toggle-states: 2; // How many states display: none; } // An element with 2 or greater toggle states // can react to the :checked pseudo-class #modal:checked { display: block; } .modal-button { toggle-share(#modal); }
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.
This button should trigger a popover on hover.
This link and that link should have tooltips on hover.
We set a fixed max-height
on the .modal-body
. Watch it overflow with all this extra lorem ipsum text we've included.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.