[Help] Firefox compatibility

I am having trouble getting the radio button background images that I am using for tabs to show up on Firefox. I was wondering if anyone had any suggestions. The sheet is the Starfinder (simple) character sheet. Please checkout the current code on GitHub if you are unfamiliar with it. Link to Github folder

The ::before and ::after pseudo-elements don't work (edit:) on inputs  in Firefox, and don't expect them to work any time soon, since it's not part of the spec. Instead, put an empty span after the input, and then you can style the background of the span instead. You can give the input an absolute position... position: absolute; z-index: 1; opacity: 0; to make it stay on top of the span.

Thank you for the recommendation Jakob. I'll give it a shot.

There's more info about this technique in the  Wiki .

Okay, I took a stab at this... and well, the pools of blood are thick. Problems: I use radio buttons for more than one operation on the sheet. Is there a way to set up more than one type of "fake radio button"? With regard to the tabs, the idea is to have a different image for checked and unchecked radio buttons. Is this possible when the background is tied to the span and not the input? I think if I can get through those two questions, I can probably figure out how to set everything up.

1. Yes, just separate them by class. I.e. the radios become <input type="radio" class="sheet-fakeradio1" ...> with corresponding css  input.sheet-fakeradio1 { ... } input.sheet-fakeradio1 + span { ... } And then you can put different CSS for inputs of type sheet-fakeradio2 et cetera. 2. Yes, you can use input.sheet-fakeradio1 + span { background-image: picture1; } input.sheet-fakeradio1:checked + span { background-image: picture2; }

Ok, think I sort of stumbled my way onto both of those answers. The next thing I am having trouble with is the titles on the tabs. The old css derived the titles from the input attribute "title" using  content: attr(title); Is there a way to duplicate this action?

You can either just put the content in the span itself in the HTML, which is probably the easiest solution, or you can give the span a title tag and then use input.sheet-fakeradio1 + span::before {...} where you can use content: attr(title); like in your old code. But really, unless you have a good reason to do this, it's easiest to just put the content into the HTML.

I think I see what you mean. Now all I have to do is get the spacing to work out. Thank you so much for all the help Jakob.