| <!DOCTYPE html> | |
| <meta charset="UTF-8"> | |
| <title>CSS Pseudo-Elements Test: active selection and input type="text" element</title> | |
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | |
| <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors"> | |
| <link rel="match" href="reference/selection-input-011-ref.html"> | |
| <!-- Allow different antialiased pixels on the focus ring. --> | |
| <meta name="fuzzy" content="0-5;0-255"> | |
| <style> | |
| input | |
| { | |
| background-color: red; | |
| color: yellow; | |
| font-family: monospace; | |
| font-size: 48px; | |
| line-height: 56px; | |
| padding: 0px; | |
| width: 13ch; | |
| } | |
| input::selection | |
| { | |
| background-color: yellow; | |
| color: green; | |
| } | |
| </style> | |
| <script> | |
| function startTest() | |
| { | |
| document.getElementById("test").select(); | |
| } | |
| </script> | |
| <body onload="startTest();"> | |
| <p>Test passes if each glyph of "Selected Text" is green with a yellow background and if there is <strong>no red</strong>. | |
| <div><input type="text" value="Selected Text" id="test"></div> |