4 ms·
<style> #my-popover { display: none; border: 1px solid black; padding: 10px; margin-top: 10px; } #toggle:checked + #my-popover { display: block; } </style> <bod
by G_o_D 2y ago
<style>
#my-popover { display: none; border: 1px solid black; padding: 10px; margin-top: 10px;
}
#toggle:checked + #my-popover { display: block;
}
</style>
<body>
<label for="toggle" id="my-button">Toggle Popover</label>
<input type="checkbox" id="toggle" style="display: none;">
<div id="my-popover">My content!</div>
</body>
Wont this work a toggle popup with html+css only no js yet interactive with label
- 77 2y agoThis hack has terrible accessibility. For one, the <label> is not focusable by default, so keyboard users won't be able to toggle the popup at all. And I don't think it's possible to dynamically set ARIA attributes without JS.