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:

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.

add z-index: 2; in .topcoat-switch class in css..and check if its working.. — Nikhil N, Oct 25 '13 at 06:13

score 1 · Accepted Answer · answered Oct 25 '13 at 06:55

1

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

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

answered Oct 25 '13 at 06:55

Charles Ingalls

4,521
5
25
33

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

1 Answers1