選択リストをバーボタンに変換するにはどうすればよいですか？

Question

セレクタを左の画像のように適切な作業にするにはどうすればよいですか？

Answer 1

for属性を使用し、入力フィールドを非表示にする代わりに、チェックボックスにラベルを付けるようにスタイリングします。

input { 
 
    display: none; 
 
} 
 
label { 
 
    border: 1px solid #999; 
 
    background: #eee; 
 
    padding: .5em; 
 
    margin: 0 .5em 0 0; 
 
    display: inline-block; 
 
} 
 
input:checked + label { 
 
    border: 1px solid green; 
 
}

<input id="one" type="checkbox" name="thing"><label for="one">one</label> 
 

 
<input id="two" type="checkbox" name="thing"><label for="two">one</label> 
 

 
<input id="three" type="checkbox" name="thing"><label for="three">one</label>