<div class="dropdown">
<div class="form">
<input type="text" id="select" value="--- select ---">
<button class="button"> <i class="fas fa-chevron-down fa-sm"></i></button>
</div>
<ul class="dropdownList">
<li><a href="#">option one</a></li>
<li><a href="#">option two</a></li>
</ul>
</div>* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #fff;
}
//layout
.dropdown {
width: 220px;
height: auto;
display: flex;
flex-direction: column;
.form {
display: flex;
input {
width: 200px;
}
.button {
width: 50px;
.fa-chevron-down {
transform: rotate(0deg);
transition: all 0.6s;
&.active {
transform: rotate(180deg);
}
}
}
input,
button {
border: none;
padding: 20px 5px;
background-color: black;
color: #fff;
cursor: pointer;
&:focus {
outline: none;
}
}
}
.dropdownList {
display: none;
background-color: #000;
li {
padding: 20px;
&:hover {
background-color: #333333;
transition: all 0.5s ease;
}
}
}
}
$(function () {
$(".button").click(function (e) {
e.preventDefault();
$(".dropdownList").slideToggle(500);
$(".fa-chevron-down").toggleClass("active");
});
});
