[Help] Firefox compatibility

1507831702
Phillip G.
Pro
Sheet Author
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
1507833456

Edited 1507876745
Jakob
Pro
Sheet Author
API Scripter
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.
1507854218
Phillip G.
Pro
Sheet Author
Thank you for the recommendation Jakob. I'll give it a shot.
1507877108
Jakob
Pro
Sheet Author
API Scripter
There's more info about this technique in the  Wiki .
1508101322
Phillip G.
Pro
Sheet Author
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.
1508105434

Edited 1508105503
Jakob
Pro
Sheet Author
API Scripter
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; }
1508106088
Phillip G.
Pro
Sheet Author
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?
1508152432
Jakob
Pro
Sheet Author
API Scripter
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.
1508166575
Phillip G.
Pro
Sheet Author
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.