scroll-buttons-enabled.html (1204B)
1 <!doctype html> 2 <title>CSS Test: ::scroll-button(inline-end) supports :enabled</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons"> 4 <link rel="match" href="scroll-buttons-enabled-ref.html"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 * { 8 margin: 0; 9 font-family: Ahem; 10 } 11 12 #scroller { 13 width: 600px; 14 height: 300px; 15 overflow: auto; 16 scroll-marker-group: after; 17 white-space: nowrap; 18 } 19 20 #scroller div { 21 background: green; 22 display: inline-block; 23 width: 600px; 24 height: 270px; 25 } 26 27 #scroller::scroll-marker-group { 28 border: 3px solid black; 29 padding: 5px; 30 display: flex; 31 height: 20px; 32 width: 40px; 33 } 34 35 #scroller::scroll-button(inline-end) { 36 content: "p"; 37 font-family: Ahem; 38 background: blue; 39 display: flex; 40 height: 20px; 41 width: 20px; 42 } 43 44 #scroller::scroll-button(inline-end):enabled { 45 background: gold; 46 } 47 48 #scroller div::scroll-marker { 49 content: ""; 50 width: 10px; 51 height: 10px; 52 background-color: blue; 53 border-radius: 100%; 54 display: inline-block; 55 } 56 </style> 57 <div id="scroller"> 58 <div></div> 59 <div></div> 60 </div>