JavaScript — Как использовать флажок внутри Select Option

Демо в jsFiddle {amp}amp; Stack Snippets

select { width: 150px; } .select-checkbox option::before { content: "2610"; width: 1.3em; text-align: center; display: inline-block; } .select-checkbox option:checked::before { content: "2611"; } .select-checkbox-fa option::before { font-family: FontAwesome; content: "f096"; width: 1.3em; display: inline-block; margin-left: 2px; } .select-checkbox-fa option:checked::before { content: "f046"; } 
 {amp}lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"{amp}gt; {amp}lt;h3{amp}gt;Unicode{amp}lt;/h3{amp}gt; {amp}lt;select multiple="" class="form-control select-checkbox" size="5"{amp}gt; {amp}lt;option{amp}gt;Dog{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Cat{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Hippo{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Dinosaur{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Another Dog{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;h3{amp}gt;Font Awesome{amp}lt;/h3{amp}gt; {amp}lt;select multiple="" class="form-control select-checkbox-fa" size="5"{amp}gt; {amp}lt;option{amp}gt;Dog{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Cat{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Hippo{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Dinosaur{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Another Dog{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; 

Примечание : Остерегайтесь проблем совместимости IE, однако

Дополнительная информация:

CSS позиционирование

Как наложить один div на другой div

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector