bootstrap select option dropdown down arrow not showing
If you are using Bootstrap v5 the tag has changed to
<select class="form-select">
Hi i trying to reproduce this issue with your sample code.
But i not faced any specified arrow missing issue in the result.
.form-control {display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);box-shadow: inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}<select class="form-control" onchange="location = this.value;"> <option>Select a Generic Name</option> <option value="1">Title 1</option> <option value="2">Title 2</option> </select>Note:Make sure the following css is not used for the select dropdown.
select { /* for Firefox */ -moz-appearance: none; /* for Chrome */ -webkit-appearance: none;}/* For IE10 */select::-ms-expand { display: none;}Hope it will helpful.
I was facing the same issue with the bootstrap-select field.here is a simple class that definitely solves the problem.
Add custom-select class next to the form-control class.
<select class="form-control custom-select"> <option>Select a Generic Name</option> <option value="1">Title 1</option> <option value="2">Title 2</option> </select>It will display an arrow notation, which may differ in look according to the browser and OS you are using.