独自のレイアウトでスタイルを選択して選択する

Question

私はこのような選択入力をしたい、私はすでにUIを設計している Googleで検索しようとしたが、コードをビルドする方法と多くの人がULとLI。

selectタグでこのデザインを構築する方法はありますか、私は、ドロップダウン李を使用する必要がある場合はどのように選択のような関数にリストを構築します。

Answer 1

次のように選択ドロップダウンをシミュレートできます。

私はこのためにフォームを使用すると仮定します。コードには、選択された値を取得する非表示の入力要素が含まれています。

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