Styling sélectionnez liste déroulante avec mise en page unique

Question

Je veux faire l'entrée de sélection comme ça, j'ai déjà conçu l'interface utilisateur J'ai essayé de chercher dans google, comment le construire au code et beaucoup de gens semblent utiliser dropdown css avec UL et LI.

Est-il possible de construire cette conception avec balise select, ou si je dois utiliser li déroulant comment construire la liste à des fonctions telles que select.

Answer 1

Vous pouvez simuler la liste déroulante de sélection comme suit. Je suppose que vous utilisez un formulaire pour cela. Le code contient un élément d'entrée caché qui obtiendra la valeur qui a été sélectionnée.

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