Firefox don't display radio replacement

Hello, To select the type of the sheet (PC, NPC and ennemy), I have make radio box and replace it with text and style. It works correctly in Chrome but Firefox don't display the replacements. In Chrome :   In Firefox : My HTML : <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" title="PJ" checked/><span></span> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" title="PNJ" /><span></span> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" title="Ennemi" /><span></span> My CSS : /* Sheet selection */ div.sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3 { display: block; } input.sheet-tab { width: 100px; height: 25px; left: 6px; margin: 35px 2px; cursor: pointer; z-index: 1; border: 2px solid #000; border-radius: 6px; font-family:"Cinzel Decorative", serif; font-size: 18px; } input.sheet-tab::before { content: attr(title); text-align: center; display: inline-block; background: #fff; color: #000; width: 100px; height: 25px; border: 2px solid #000; border-radius: 6px; font-family:"Cinzel Decorative", serif; font-size: 18px; } input.sheet-tab:checked::before { background: #926239; color: #fff; border: 2px solid #000; border-radius: 6px; font-family:"Cinzel Decorative", serif; font-size: 18px; } div.sheet-tab-content { width:827px; height: fit-content; margin: 0 0 0 0; padding: 5px; background-color:#926239 } /* End of tabs */ Anyone have an idea to repair this ? Thanks for attention.

Well, from your html, it looks like you don't have the text in the span's? So I'm not sure how you're getting it to display on Chrome.

Hello Scott, After thinking about it, you are right, I don't how it works but it works. It's why firefox don't display anithyng ?

Yes, I'm not sure how chrome is displaying anything. Nothing in your html or css that you posted handles that, so chrome shouldn't be displaying anything either. You are using attr(title) to get the text. Firefox should support that, but perhaps something is wrong there. Instead I would just put the text in the spans, that is a much better solution from an accessibility standpoint.

I have tried this and it doesn't work, I think it's a problem with the CSS rules and Mozilla. So I have a system to switch pages into the tabs with buttons and sheetworker (this one  Tabs with sheetworker ).  Is it possible to nest this system within itself ? Because it's more simple to use it.

I'm not sure what you mean? Do you want to have tabs within the tab sections like the ability to display pc/npc sheets, and then in the pc sheet switch a section from showing weapons, equipment, spells, etc? I have tried this and it doesn't work, I think it's a problem with the CSS rules and Mozilla. What have you tried?

I have tried to put the text into the spans, firefox display it but the radio checks are already here. And yes I want to have PC, NPC and Enemy selection for the type of sheet and after tabs with principal, equipment, etc... I have already made this with buttons and a sheetworker and my question is : Can I nest this system ? So can I make buttons and sheetworker to choose the type of sheet (PC, NPC or Enemy) and other buttons to choose the tabs in the sheet (principal, equipment, etc..) ? Here is the link to my GitHub repo . It will probably be clearer with the complete code.  Sorry if I'm not making myself clear, English is not my native language.

Yes, you can nest either the pure html solution that you are currently using, or the sheetworker solution. You just need a separate attribute for storing the current tab for each level. I'd also typically recommend using more descriptive names than tab1, tab2, etc.

Ok thanks Scott. I will used the sheetworker solution, Firefox display it correctly