selection-input-011.html (1117B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Pseudo-Elements Test: active selection and input type="text" element</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors"> 9 <link rel="match" href="reference/selection-input-011-ref.html"> 10 <!-- Allow different antialiased pixels on the focus ring. --> 11 <meta name="fuzzy" content="0-5;0-255"> 12 13 <style> 14 input 15 { 16 background-color: red; 17 color: yellow; 18 font-family: monospace; 19 font-size: 48px; 20 line-height: 56px; 21 padding: 0px; 22 width: 13ch; 23 } 24 25 input::selection 26 { 27 background-color: yellow; 28 color: green; 29 } 30 </style> 31 32 <script> 33 function startTest() 34 { 35 document.getElementById("test").select(); 36 } 37 </script> 38 39 <body onload="startTest();"> 40 41 <p>Test passes if each glyph of "Selected Text" is green with a yellow background and if there is <strong>no red</strong>. 42 43 <div><input type="text" value="Selected Text" id="test"></div>