Как мне добавить картинку в select?

Question

[Cole1247]

Всем привет, никто мне не подскажет, как сделать это?

У меня вот так:


HTML:

<div class="select select-valute">
					       <div class="input">
					    </div>
					    <div class="select-options">
					      <ul>
					        <li>
					        	<span>
								<img src="img/icons/rub_icon.png">Rub
					      		</span>
					        </li>
					        <li>
					          	<span>
								<img src="img/icons/dollar_icon.png">Usd
					      		</span>
					        </li>
					        <li>
					          	<span>
								<img src="img/icons/tg_icon.png">Kzh
					      		</span>
					        </li>
					      </ul>
					    </div>
					</div>

JS:
$('.select').each(function(){
var select = $(this);
if ($('.select-options ul li.selected', select).length) {
$('.input', select).text($('.select-options li.selected > span:first-child', select).text());
} else {
$('.input', select).text($('.select-options li:first-child > span:first-child', select).text());
}
select.click(function() {
$(this).children('.select-options').toggleClass('visible');
});
$('.select-options li', select).click(function() {
$('.selected', select).removeClass('selected');
$(this).addClass('selected');
$('.input', select).text($(this).find('span:first-child').text());
});
})

Comments

[Ankhena]

Выложите ваш код вместе со стилями в песочницу. По тому, как написано сейчас все должно работать.

Answer 1

[Никита Ермиличев]

Это можно реализовать, только написав собственную эмуляцию select'а

Или так

https://ida-freewares.ru/delaem-select-s-kartinkam...

Comments

[Cole1247]

У меня и так моя)

[Никита Ермиличев]

Егор Скороходов, не совсем

[Никита Ермиличев]

Егор Скороходов, не совсем глянул код :)

[Никита Ермиличев]

Cole1247, css можете приложить?

Answer 2

[Роман Ташев]

С помощью псевдоклассов after/before например:

span::before{
   content: url(../img/icons/rub_icon.png);
    position: relative;
    right: px;
    width: px;
    bottom: px;
    height: px;
    background-repeat: no-repeat;
    cursor: pointer;

В общем поучи CSS.