1 2list, 3grid { 4 display: block; 5 outline: none; 6 overflow: auto; 7 position: relative; /* Make sure that item offsets are relative to the 8 list. */ 9} 10 11list > *, 12grid > * { 13 -webkit-user-select: none; 14 background-color: rgba(255,255,255,0); 15 border: 1px solid rgba(255,255,255,0); /* transparent white */ 16 border-radius: 2px; 17 cursor: default; 18 line-height: 20px; 19 margin: -1px 0; 20 overflow: hidden; 21 padding: 0px 3px; 22 position: relative; /* to allow overlap */ 23 text-overflow: ellipsis; 24 white-space: pre; 25} 26 27list > * { 28 display: block; 29} 30 31grid > * { 32 display: inline-block; 33} 34 35list > [lead], 36grid > [lead] { 37 border-color: transparent; 38} 39 40list:focus > [lead], 41grid:focus > [lead] { 42 border-color: hsl(214, 91%, 65%); 43 z-index: 2; 44} 45 46list > [anchor], 47grid > [anchor] { 48 49} 50 51list:not([disabled]) > :hover, 52grid:not([disabled]) > :hover { 53 border-color: hsl(214, 91%, 85%); 54 z-index: 1; 55 background-color: hsl(214, 91%, 97%); 56} 57 58list > [selected], 59grid > [selected] { 60 border-color: hsl(0, 0%, 85%); 61 background-color: hsl(0,0%,90%); 62 z-index: 2; 63 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8), 64 rgba(255, 255, 255, 0)); 65} 66 67list:focus > [selected], 68grid:focus > [selected] { 69 background-color: hsl(214,91%,89%); 70 border-color: hsl(214, 91%, 65%); 71} 72 73list:focus > [lead][selected], 74list > [selected]:hover, 75grid:focus > [lead][selected], 76grid > [selected]:hover { 77 background-color: hsl(214, 91%, 87%); 78 border-color: hsl(214, 91%, 65%); 79} 80 81list > .spacer, 82grid > .spacer { 83 border: 0; 84 box-sizing: border-box; 85 display: block; 86 overflow: hidden; 87 visibility: hidden; 88 margin: 0; 89} 90