focus-within-006.html (1536B)
1 <!DOCTYPE html> 2 <html lang=en class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Selectors Level 4: focus-within</title> 5 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> 6 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> 7 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> 8 <link rel="match" href="focus-within-006-ref.html"> 9 <meta name="assert" content="Test that :focus-within works on form controls, using an input element."> 10 <style> 11 :focus { 12 outline: none; 13 14 /* Make the caret invisible 15 since it matches the color of the text, which is transparent, 16 while keeping the text readable thanks to its shadow. 17 Not using the caret-color property as it is too new to be relied on. */ 18 color: transparent; text-shadow: black 0px 0px 0px; 19 } 20 21 /* Use blue to indicate that the user needs to pay attention. 22 This element needs to be focused for the test to make sense. */ 23 #focusme:not(:focus) { 24 border: solid 15px blue; 25 } 26 27 #focusme:focus:not(:focus-within) { 28 background: red; 29 } 30 div:focus-within { 31 border: solid 5px green; 32 } 33 </style> 34 <p>Test passes if, when the element below is focused, 35 it is surrounded by a thick green border. 36 There must be no red or blue once it is focused.</p> 37 <div> 38 <div> 39 <div> 40 <input id="focusme" value="Focus this element"> 41 </div> 42 </div> 43 </div> 44 <script> 45 var focusme = document.getElementById('focusme'); 46 focusme.focus(); 47 document.documentElement.classList.remove('reftest-wait'); 48 </script> 49 </html>