Styling wählen Dropdown mit einzigartigem Layout

Question

Ich möchte den Select-Eingang wie folgt machen, ich habe bereits die UI Ich habe versucht, in Google zu suchen, wie man es zu Code erstellen und viele der Leute scheint Dropdown-Css mit UL zu verwenden LI.

Gibt es eine Möglichkeit, diesen Entwurf mit ausgewähltem Tag zu bauen, oder wenn ich Drop-Down-li verwenden muß, wie die Liste auf Funktionen wie wählen zu bauen.

Answer 1

Sie können das Auswahl-Dropdown wie folgt simulieren.

Ich nehme an, dass Sie ein Formular dafür verwenden. Der Code enthält ein verstecktes Eingabeelement, das den ausgewählten Wert erhält.

$("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>