Kawish Behzad Kawish Behzad - 2 months ago 21
CSS Question

Styling select dropdown with unique layout

I wanna make the select input like this, I already designed the UI
I tried to search in google, how to build it to code and many of the people seems to use dropdown css with UL and LI.

the UI

Is there any way to build this design with select tag, or if I must use dropdown li how to build the list to functions like select.

Answer Source

You can simulate the select dropdown as follows.

I assume you use a form for this. The code contains a hidden input element which will get the value that was selected.

$("body").on("click", ".selected", function() {
  $(this).next(".options").toggleClass("open");
});

$("body").on("click", ".option", function() {
  var value = $(this).find("span").html();
  $(".selected").html(value);
  $("#sel").val(value);
  $(".options").toggleClass("open");
});
.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li>img {
  margin-right: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
  <div class="selected">Select an option</div>
  <ul class="options">
    <li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
    <li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
    <li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
  </ul>
</div>
</form>