<small style="width:400px; margin: 20px auto;">This method uses radio buttons to record user input. To navigate by keyboard, focus the button and press enter to open dropdown, tab through the dropdown items & press enter to select option. Visit <a href="https://btn.ninja" target="_blank">btn.ninja</a> for more.</small>
<div class="dropdown" style="width:200px; margin:20px auto;">
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
<ins>Press this Button</ins>
</button>
<div class="dropdown-menu radio">
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="001" name="alphabet">
<i>Alpha</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="002" name="alphabet">
<i>Bravo</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="003" name="alphabet">
<i>Charlie</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="004" name="alphabet">
<i>Delta</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="005" name="alphabet">
<i>Echo</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="006" name="alphabet">
<i>Foxtrot</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="007" name="alphabet">
<i>Golf</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="008" name="alphabet">
<i>Hotel</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="009" name="alphabet">
<i>India</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="010" name="alphabet">
<i>Juliette</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="011" name="alphabet">
<i>Kilo</i>
</label>
<label class="dropdown-item">
<input class="jRadioDropdown" type="radio" value="012" name="alphabet">
<i>Lima</i>
</label>
</div>
</div>
.dropdown-menu.radio .dropdown-item {
position:relative;
overflow:hidden;
cursor:pointer; }
.dropdown-menu.radio input {
visibility: hidden;
position:absolute; left: -30px; }
.dropdown-menu.radio i {
font-weight:normal; font-style:normal;
display:block; }
.dropdown-item.active {
background-color:#555; color:#fff;
}
// OPTIONAL JS
// Change the button text & add active class
$('.jRadioDropdown').change(function() {
var dropdown = $(this).closest('.dropdown');
var thislabel = $(this).closest('label');
dropdown.find('label').removeClass('active');
if( $(this).is(':checked') ) {
thislabel.addClass('active');
dropdown.find('ins').html( thislabel.text() );
}
});
//Add tabindex on labels
$('label.dropdown-item').each(function (index, value){
$(this).attr('tabindex', 0 );
$(this).find('input').attr('tabindex', -1 );
});
//Add keyboard navigation
$('label.dropdown-item').keypress(function(e){
if((e.keyCode ? e.keyCode : e.which) == 13){
$(this).trigger('click');
}
});
