4 ms·
> checkbox/radio inputs can be used to toggle state with `:checked ~ .foo` selectors What kind of state do you mean? Could you give an example?
by SimeVidas 5y ago
> checkbox/radio inputs can be used to toggle state with `:checked ~ .foo` selectors
What kind of state do you mean? Could you give an example?
- joeframbach 5y agoAn accordion widget is simply a series of radio button followed by div. You can see this in action at amazon.com in a product page with multiple purchase options, the buy button will have a radio with multiple options, it's just a radio button. An accordion that allows multiple open panes is a series of checkbox followed by div. More advanced, you can create a flashcard app by allotting two checkboxes per card. I used this technique around 3 years ago when I was studying kanji: http://sokogakuen.framba.ch http://sokogakuen.framba.ch
- charrondev 5y agoThe pattern is: <label> <input class”real-check” type=checkbox /> <span class”fake-check”/> <strong>this is the text label</strong> </label> - visually hide the checkbox - use a selector like “.real-check:checked + .fake-check and draw whatever you want in the fake check. - the fake check and the text label are both inside the label element. Interacting with them will toggle the check box.
- inopinatus 5y agoHere's a simple example, toggles for checkbox inputs. https://play.tailwindcss.com/BvQpg9QWEe https://play.tailwindcss.com/BvQpg9QWEe
- meagher 5y agoComing soon to Tailwind https://twitter.com/adamwathan/status/1400516100329295875?s=20 https://twitter.com/adamwathan/status/1400516100329295875?s=...