Hi there, I am trying to implement in a sheet the trick given on <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Select_Dropdowns" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Select_Dropdowns</a> <a href="http://jsfiddle.net/ojvq39oo/" rel="nofollow">http://jsfiddle.net/ojvq39oo/</a> The code is pretty clever to create a pseudo <select> with A container (sheet-child) A set of divs, that don't display, except for the one that corresponds to the value of a radio input. Also if the container is hovered, the div actually disappears to leaves space to: The radio inputs and attached labels that are in display: none ... except if hovered on the container That would all be nice and lovely except it doesn't appear in roll20 the way it appears in jsfiddle. For a mysterious reason, the radio buttons and labels don't line up correctly and are all messed up. I tried many things in the css including: Playing with the inline/inline-block/block display that styles the input and label which looks like the ones that actually regulate the alignment that is messed I end up with results like: O 1 O 2 O 3 or O 1 O 2 O 3 Looking at example online it seems that there are 2 ways that work correctly to line up correctly a radio: <div> <input radio value 1> <label> 1</label> >/div <div> <input radio value 2> <label> 2</label> >/div or <label display:block> <input radio value 1> 1</label> <label display:block> <input radio value 2> 2</label> Both work well to re-align the radio... But now it is the logic to display the divs that is messed up because the CSS styling to make reappear the chosen div doesn't see the input radio that is encapsulated .sheet-pseudo-select:not(:hover) input.sheet-select-radio.sheet-option10:checked ~ div.sheet-option10{display: block;} I m pretty out of ideas... any suggestions ?
