1 menu { 2 display: none; 3 position: fixed; 4 border: 1px solid rgba(0, 0, 0, .50); 5 -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .50); 6 color: black; 7 background: -webkit-linear-gradient(#fff, #eee); 8 left: 0; 9 white-space: nowrap; 10 padding: 8px 0; 11 margin: 0; 12 cursor: default; 13 border-radius: 3px; 14 z-index: 3; 15 } 16 17 menu > * { 18 box-sizing: border-box; 19 display: block; 20 margin: 0; 21 width: 100%; 22 text-align: start; 23 } 24 25 menu > :not(hr) { 26 -webkit-appearance: none; 27 background: transparent; 28 font: inherit; 29 border: 0; 30 line-height: 18px; 31 padding: 0 19px; 32 overflow: hidden; 33 text-overflow: ellipsis; 34 } 35 36 menu > hr { 37 background: -webkit-linear-gradient(left, 38 rgba(0, 0, 0, .10), 39 rgba(0, 0, 0, .02) 96%); 40 border: 0; 41 height: 1px; 42 margin: 8px 0; 43 } 44 45 menu > [disabled] { 46 color: rgba(0, 0, 0, .3); 47 } 48 49 menu > [hidden] { 50 display: none; 51 } 52 53 menu > :not(hr)[selected] { 54 background-color: #dce5fa; 55 } 56 57 menu > :not(hr)[selected]:active { 58 background-color: #426dc9; 59 color: #fff; 60 } 61 62 menu > [checked]:before { 63 content: url("../images/checkbox_black.png"); 64 width: 9px; 65 height: 9px; 66 display: inline-block; 67 vertical-align: 50%; 68 margin: 0 5px; 69 } 70 71 menu > [checked] { 72 -webkit-padding-start: 0; 73 } 74 75 menu > [selected][checked]:active:before { 76 content: url("../images/checkbox_white.png"); 77 } 78