Pure CSS & HTML Select Dropdown form (with labels) - html

Question

Made the following pen which is working just fine in any of the up to date browsers (incl. IE11) on a Windows PC. Could anyone tell me why is it not working on a Mac?
as in why exactly does :focus work differently and how does it work differently (it actually works in Chrome on Mac; but not on Safari & Firefox)
.fs_container {
width: 12rem;
position: relative;
}
#dropdown {
opacity: 0;
position: absolute;
z-index: -1;
}
.fs_select {
border: 1px solid grey;
padding: 5px 10px;
width: 100%;
display: block;
box-sizing: border-box;
border-radius: 3px;
background: white;
position: relative;
z-index: 0;
}
.blocker {
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: -2;
}
.fs_dropdown {
opacity: 0;
list-style: none;
padding: 0;
border: 1px solid grey;
border-top: none;
width: 100%;
box-sizing: border-box;
margin: 0;
border-radius: 3px;
}
.fs_dropdown label {
background: #FF530D;
padding: 4px 10px;
box-sizing: border-box;
width: 100%;
display: block;
border-bottom: 2px dashed #E82C0C;
}
.fs_dropdown li:last-of-type label {
border-bottom: none;
}
#dropdown:focus ~ ul {
opacity: 1;
}
#dropdown:focus ~ div.blocker {
z-index: 2;
}
.fs_selections input {
opacity: 0;
position: absolute;
z-index: -1;
}
.fs_selections label.selected {
position: absolute;
top: 1px;
left: 2px;
padding: 5px 10px;
width: 90%;
box-sizing: border-box;
opacity: 0;
background: white;
}
.fs_selections input:checked + label.selected {
opacity: 1;
}
<div class="fs_container">
<input type="checkbox" id="dropdown" />
<label for="dropdown" class="fs_select">Select</label>
<div class="fs_select blocker"> </div>
<ul class="fs_dropdown">
<li><label for="fa">Option a</label></li>
<li><label for="fb">Option b</label></li>
<li><label for="fc">Option c</label></li>
</ul>
<div class="fs_selections">
<input type="radio" value="Option a" name="languages" id="fa" />
<label for="dropdown" class="selected">Option a</label>
<input type="radio" value="Option b" name="languages" id="fb" />
<label for="dropdown" class="selected">Option b</label>
<input type="radio" value="Option c" name="languages" id="fc" />
<label for="dropdown" class="selected">Option c</label>
</div>
</div>