focus-visible-element-in-overflow-hidden-container-ref.html (895B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-focus"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1858984"> 8 <style> 9 #container 10 { 11 margin: 4px; 12 height: 25px; 13 border: 1px solid black; 14 overflow: hidden; 15 line-height: 25px; 16 } 17 18 #switch 19 { 20 position: relative; 21 display: inline-block; 22 width: 30px; 23 height: 17px; 24 vertical-align: text-top; 25 } 26 27 #checkbox 28 { 29 opacity: 0; 30 width: 0; 31 height: 0; 32 } 33 34 #slider 35 { 36 position: absolute; 37 inset: 0; 38 background-color: #ccc; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="container"> 44 <label id="switch"> 45 <input id="checkbox" type="checkbox"> 46 <span id="slider"></span> 47 </label> 48 </div> 49 </body> 50 </html>