I am trying to create a menu with data-subtext, I have seen some suggestions around on stackoverflow but I cannot get the menu to work. The problem is that the menu doesn't open.
What am I doing wrong ? Code below Link: https://jsfiddle.net/snake93/mfhvs6xp/55/
I almost forgot, is it possible to remove the black border via css when the menu is active? Example: https://ibb.co/jwWzL7T
$('.strunz').selectpicker();<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>
<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
<select class="strunz" data-show-subtext="true" data-size="8">
<option class="optns" data-subtext="Heinz" value="0">Select car:</option>
<option class="optns" data-subtext="Heinz" value="1">Audi</option>
<option class="optns" data-subtext="Heinz" value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>$('.strunz').selectpicker();.optns {
background: red;
}
.optns:hover {
background: black !important;
color: yellow !important;
}
.btn {
border-radius: 0px !important
}
.dropdown .bootstrap-select .dropdown-toggle:focus, .dropdown .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
outline: none !important;
}
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>
<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
<select class="strunz" data-show-subtext="true" data-size="8">
<option class="optns" data-subtext="Heinz" value="0">Select car:</option>
<option class="optns" data-subtext="Heinz" value="1">Audi</option>
<option class="optns" data-subtext="Heinz" value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>Add Popper under jQuery as you did and for black border add this css
Popper jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
CSS
.dropdown .bootstrap-select .dropdown-toggle:focus, .dropdown .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
outline: none !important;
}