CSS switch input text is not visible when background colour applied to parent element

Question

I am looking at the topcoat library and using one of there components; Topcoat Switch.

The example functions fine here:

http://codepen.io/Topcoat/pen/upxds

But in my app I nest the switch in an unordered list and have to apply a background colour to the containing list element for styling purposes. As mimicked here:

http://codepen.io/anon/pen/ekKEc

This crude example masks the text from being visible which is highly undesirable.

Similarly if i apply a background colour to the label element the same issue is evident.

Any help on this would be nice as i spent the last day messing about with z-index etc and just figured out it was the background colour.

Answer 1

Increasing the z-index on the .topcoat-switch class should do the trick.

Check it out: http://codepen.io/anon/pen/vcqGh