Well first off, if you want the possibility of multiple selections, that's checkbox's job, not radio buttons. THAT would require JavaScript for the "select none" option.
The first step is to get the proper semantic markup for the functionality in question. That would most likely be:
<fieldset class="fauxSelect">
<legend>Number:</legend>
<input type="radio" id="numbers_zero" name="numbers" value="0">
<label for="numbers_zero">zero</label><br>
<input type="radio" id="numbers_one" name="numbers" value="1">
<label for="numbers_one">one</label><br>
<input type="radio" id="numbers_two" name="numbers" value="2">
<label for="numbers_two">two</label><br>
<input type="radio" id="numbers_three" name="numbers" value="3">
<label for="numbers_three">three</label><br>
<input type="radio" id="numbers_four" name="numbers" value="4">
<label for="numbers_four">four</label><br>
<input type="radio" id="numbers_five" name="numbers" value="5">
<label for="numbers_five">five</label><br>
<input type="radio" id="numbers_six" name="numbers" value="6">
<label for="numbers_six">six</label><br>
<input type="radio" id="numbers_seven" name="numbers" value="7">
<label for="numbers_seven">seven</label><br>
<input type="radio" id="numbers_eight" name="numbers" value="8">
<label for="numbers_eight">eight</label><br>
<input type="radio" id="numbers_nine" name="numbers" value="9">
<label for="numbers_nine">nine</label><br>
<input type="radio" id="numbers_ten" name="numbers" value="10">
<label for="numbers_ten">ten</label><br>
<input type="radio" id="numbers_eleven" name="numbers" value="11">
<label for="numbers_eleven">eleven</label><br>
<input type="radio" id="numbers_twelve" name="numbers" value="12">
<label for="numbers_twelve">twelve</label><br>
<input type="radio" id="numbers_thirteen" name="numbers" value="13">
<label for="numbers_thirteen">thirteen</label><br>
<input type="radio" id="numbers_fourteen" name="numbers" value="14">
<label for="numbers_fourteen">fourteen</label><br>
<input type="radio" id="numbers_fifteen" name="numbers" value="15">
<label for="numbers_fifteen">fifteen</label><br>
</fieldset>
Then we add two more input at the very start, one for clearing it, one for showing the submenu, and then wrap the children in a DIV for the show/hide wrapper.
<fieldset class="fauxSelect">
<legend>Number:</legend>
<div>
<input
type="radio"
name="numbers"
id="numbers_clear"
class="fauxSelect_clear"
hidden
><label for="numbers_clear">Clear</label>
<input
type="radio"
name="numbers"
id="numbers_show"
class="fauxSelect_show"
hidden
>
<div>
<input type="radio" id="numbers_zero" name="numbers" value="0">
<label for="numbers_zero">zero</label><br>
<input type="radio" id="numbers_one" name="numbers" value="1">
<label for="numbers_one">one</label><br>
<input type="radio" id="numbers_two" name="numbers" value="2">
<label for="numbers_two">two</label><br>
<input type="radio" id="numbers_three" name="numbers" value="3">
<label for="numbers_three">three</label><br>
<input type="radio" id="numbers_four" name="numbers" value="4">
<label for="numbers_four">four</label><br>
<input type="radio" id="numbers_five" name="numbers" value="5">
<label for="numbers_five">five</label><br>
<input type="radio" id="numbers_six" name="numbers" value="6">
<label for="numbers_six">six</label><br>
<input type="radio" id="numbers_seven" name="numbers" value="7">
<label for="numbers_seven">seven</label><br>
<input type="radio" id="numbers_eight" name="numbers" value="8">
<label for="numbers_eight">eight</label><br>
<input type="radio" id="numbers_nine" name="numbers" value="9">
<label for="numbers_nine">nine</label><br>
<input type="radio" id="numbers_ten" name="numbers" value="10">
<label for="numbers_ten">ten</label><br>
<input type="radio" id="numbers_eleven" name="numbers" value="11">
<label for="numbers_eleven">eleven</label><br>
<input type="radio" id="numbers_twelve" name="numbers" value="12">
<label for="numbers_twelve">twelve</label><br>
<input type="radio" id="numbers_thirteen" name="numbers" value="13">
<label for="numbers_thirteen">thirteen</label><br>
<input type="radio" id="numbers_fourteen" name="numbers" value="14">
<label for="numbers_fourteen">fourteen</label><br>
<input type="radio" id="numbers_fifteen" name="numbers" value="15">
<label for="numbers_fifteen">fifteen</label><br>
<label for="numbers_show" class="fauxSelect_showLabel"></label>
</div>
</div>
</fieldset>
Label order and placement might seem a bit funky, particularly the last one, but that's to leverage how CSS can only "look down and forward".
The magic here would be to have the DIV set in its default state to display:inline and nothing else, to float the first label right, the second one left, and then to set ALL labels and inputs to hidden / absolute positioned off screen.
Then you just .fauxSelect > div > input:checked + label { display:block; position:static; } which would make the selected label pop up inbetween the two floats.
Boom, you don't need JavaScript if it's single selection only. Multiple selections you'd use checkbox instead of radio, and the only thing your clear button would have to do is use JS to walk the DOM setting all checkboxes to unchecked -- I'd use button instead of the select + label for the clear.
Note, there was nothing wrong with having a clear button, but your initial code didn't work and all I saw was the C and half the L as the rest was cut off by the containing box.
Something like:
.fauxSelect label {
cursor:pointer;
}
.fauxSelect:after {
/* since we can't use overflow:hidden with a dropdown menu */
content:"";
display:block;
clear:both;
}
.fauxSelect > div {
position:relative;
display:inline-block;
width:100%;
max-width:16em;
border:2px solid rgba(0,0,0,0.5);
border-radius:0.5em;
}
.fauxSelect legend {
float:left; /* sneaky trick to make legends behave "normally" */
padding:0.25em 0.4em 0.25em 0;
margin:2px 0;
}
.fauxSelect label {
display:inline-block;
padding:0.25em 0.5em;
}
.fauxSelect_clear + label {
position:relative;
z-index:999;
float:right;
background:#EEE;
border-left:2px solid rgba(0,0,0,0.5);
box-shadow:inset 0 0 0.5em rgba(0,0,0,0.3);
border-radius:0 0.5em 0.5em 0;
}
.fauxSelect .fauxSelect_showLabel {
position:relative;
display:block;
text-align:right;
}
.fauxSelect_showLabel:before {
float:left;
content:"Select";
}
.fauxSelect_showLabel:after {
padding-right:0.5em;
content:"\25BC";
}
.fauxSelect .fauxSelect_show:checked + div .fauxSelect_showLabel:before,
.fauxSelect > div > div input:checked ~ .fauxSelect_showLabel:before {
display:none;
}
.fauxSelect > div > div {
display:inline;
}
.fauxSelect > div > div br,
.fauxSelect .fauxSelect_show:checked + div .fauxSelect_showLabel {
display:none;
}
.fauxSelect > div > div input,
.fauxSelect > div > div input + label {
position:absolute;
left:-999em;
}
.fauxSelect > div > div input:checked + label {
position:static;
float:left;
padding-right:2em; /* so it doesn't pass under the down-triangle */
cursor:default;
}
.fauxSelect_show + div {
overflow:hidden;
max-height:1.5em;
transition:max-height 0.5s;
}
.fauxSelect_show:checked + div {
position:absolute;
top:2.25em;
left:0;
max-height:100vh;
width:100%;
display:flex;
flex-direction:row;
flex-wrap:wrap;
border:2px solid rgba(0,0,0,0.5);
background:#CCC;
}
.fauxSelect .fauxSelect_show:checked + div input + label {
position:static;
display:block;
flex:1 0 auto;
width:26%;
margin:0.25em;
text-align:center;
background:#EEE;
}
Live demo here:
https://cutcodedown.com/for_others/jmerker/fauxSelect/Mind you untested beyond FF and Vivaldi, but should run fine most browsers IE 10/newer.
The advantages to this approach is it works without any JS so you don't even have to THINK about accessibility violations, AND it gracefully degrades to still be functional scripting off, AND you can use it in a normal form as it's all normal form elements. Things that also should be considered minimums for accessibility.
As to IE9/earlier, my current deployment plan for those browsers is to send them neither CSS or JavaScript whatsoever. GOOD scripting
AND good CSS should enhance an already working semantic page... so it's not leaving them out in the cold entirely, it's just giving those who refuse to join us in this century a degraded experience.