Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
All
All
Recent
Popular
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; outline: none; list-style: none; font-family: 'Montserrat', sans-serif; } body{ background: #e4eefa; } .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .wrapper .search_box{ width: 500px; background: #fff; border-radius: 5px; height: 65px; display: flex; padding: 10px; box-shadow: 0 8px 6px -10px #b3c6ff; } .wrapper .search_box .dropdown{ width: 150px; border-right: 2px solid #dde2f1; color: #9fa3b1; position: relative; cursor: pointer; } .wrapper .search_box .dropdown .default_option{ text-transform: uppercase; padding: 13px 15px; font-size: 14px; } .wrapper .search_box .dropdown ul{ position: absolute; top: 70px; left: -10px; background: #fff; width: 150px; border-radius: 5px; padding: 20px; display: none; box-shadow: 8px 8px 6px -10px #b3c6ff; } .wrapper .search_box .dropdown ul.active{ display: block; } .wrapper .search_box .dropdown ul li{ padding-bottom: 20px; } .wrapper .search_box .dropdown ul li:last-child{ padding-bottom: 0; } .wrapper .search_box .dropdown ul li:hover{ color: #6f768d; } .wrapper .search_box .dropdown:before{ content: ""; position: absolute; top: 18px; right: 20px; border: 8px solid; border-color: #5078ef transparent transparent transparent; } .wrapper .search_box .search_field{ width: 350px; height: 100%; position: relative; } .wrapper .search_box .search_field .input{ width: 100%; height: 100%; border: 0px; font-size: 16px; padding-left: 20px; padding-right: 38px; color: #6f768d; } .wrapper .search_box .search_field .fas{ position: absolute; top: 10px; right: 10px; font-size: 22px; color: #5078ef; cursor: pointer; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #9fa3b1; } ::-moz-placeholder { /* Firefox 19+ */ color: #9fa3b1; } :-ms-input-placeholder { /* IE 10+ */ color: #9fa3b1; }
$(".default_option").click(function(){ $(".dropdown ul").addClass("active"); }); $(".dropdown ul li").click(function(){ var text = $(this).text(); $(".default_option").text(text); $(".dropdown ul").removeClass("active"); });