IIRC, to get it to work correctly in FF, I had to put a span after it like: <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" title="Stats" checked="checked" />
<span class="sheet-tab sheet-tab1">Stats</span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" title="Weapons" />
<span class="sheet-tab sheet-tab2">Weapons</span> I believe I also changed my CSS but not certain which part was the change to get it to work; my CSS looks like: /* Fake tabs style1 (reskinned radio button; fixed to work properly in firefox */
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,
input.sheet-tab4:checked ~ div.sheet-tab4,
input.sheet-tab5:checked ~ div.sheet-tab5,
input.sheet-tab6:checked ~ div.sheet-tab6,
input.sheet-tab7:checked ~ div.sheet-tab7,
input.sheet-tab8:checked ~ div.sheet-tab8,
input.sheet-tab9:checked ~ div.sheet-tab9,
input.sheet-tab10:checked ~ div.sheet-tab10,
input.sheet-tab99:checked ~ div.sheet-tab99
{
display: block;
}
input.sheet-tab
{
width: 70px;
height: 20px;
position: relative;
top: 5px;
left: 6px;
margin: -1.5px;
cursor: pointer;
opacity: 0;
z-index: 9999;
}
span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background: white;
color: gray;
font-weight: bold;
width: 70px;
height: 20px;
cursor: pointer;
position: relative;
margin-left: -75px;
}
input.sheet-tab::before
{
content: attr(title);
border: solid 1px #a8a8a8;
border-bottom-color: black;
text-align: center;
display: inline-block;
background: #fff;
background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
width: 50px;
height: 20px;
font-size: 18px;
}
input.sheet-tab:checked::before
{
background: #dcdcdc;
background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
border-bottom-color: #fff;
}
input.sheet-tab:not(:first-child)::before
{
border-left: none;
}
div.sheet-tab-content
{
border: 1px solid #a8a8a8;
border-top-color: #000;
margin: 2px 0 0 5px;
padding: 5px;
}
