I have created a unique custom dropdown feature as shown below: view image description here
Upon selecting an option from the list, the main value will update and a label will float above it.
$(".custom-dropdown-main").click(function(){
$(".custom-dropdown").toggle();
});.create-new-budget-value-date {
margin: 30px 0 10px;
padding: 10px 0;
border-top: 1px solid #d8d9dc;
position: relative;
}
.create-new-budget-value-date:before {
content: "";
background: url(../images/up-arrow.png) no-repeat 0 0;
position: absolute;
top: -14px;
left: 100px;
width: 22px;
height: 14px;
}
.new-budget-value-select {
width: 250px;
border: 1px solid #d8d9dc;
border-radius: 5px;
padding: 2px 10px;
min-height: 45px;
}
.new-budget-value-select .custom-dropdown-main {
display: block;
text-decoration: none;
margin-top: 10px
}
.new-budget-value-select .custom-dropdown-main .glyphicon-menu-down {
float: right;
}
.new-budget-value-select .custom-dropdown {
margin-top: 5px;
}
.new-budget-value-select .custom-dropdown .dropdown-item {
display: block;
padding: 3px 2px;
}
.new-budget-value-select a:hover {
text-decoration: none;
}
.new-budget-value-select .custom-dropdown .dropdown-item:hover {
background: #e6e6e6;
color: #000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="new-budget-value-select">
<a class="custom-dropdown-main" href="#" id="custom-select">
Budget <span class="glyphicon glyphicon-menu-down"></span></a>
<div class="custom-dropdown" style="display: none;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>