focus-visible-element-in-overflow-hidden-container.html (1083B)
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 <link rel="match" href="focus-visible-element-in-overflow-hidden-container-ref.html"> 9 <style> 10 #overflowHiddenContainer 11 { 12 margin: 4px; 13 height: 25px; 14 border: 1px solid black; 15 overflow: hidden; 16 line-height: 25px; 17 } 18 19 #container 20 { 21 position: relative; 22 display: inline-block; 23 width: 30px; 24 height: 17px; 25 vertical-align: text-top; 26 } 27 28 #emptyCheckbox 29 { 30 opacity: 0; 31 width: 0; 32 height: 0; 33 } 34 35 #visibleTarget 36 { 37 position: absolute; 38 inset: 0; 39 background-color: #ccc; 40 } 41 </style> 42 </head> 43 <body> 44 <div id="overflowHiddenContainer"> 45 <label id="container"> 46 <input id="emptyCheckbox" type="checkbox"> 47 <span id="visibleTarget"></span> 48 </label> 49 </div> 50 </body> 51 <script> 52 emptyCheckbox.focus(); 53 </script> 54 </html>