Добавить изображение в DropDownList для каждого элемента - PullRequest
Новая
       5

Добавить изображение в DropDownList для каждого элемента

2 голосов
/ 21 апреля 2020

Я пытался добавить изображения в DropDownList для каждого элемента в нем, используя только HTML и CSS. Вот мой код, но он не работает. 

<!DOCTYPE html>
<html>
<head>
<style>

select option[value="en"]::before { content: url("https://www.countryflags.io/gb/flat/24.png"); }
select option[value="vn"]::before { content: url("https://www.countryflags.io/vn/flat/24.png"); }
select option[value="th"]::before { content: url("https://www.countryflags.io/th/flat/24.png"); }

</style>
</head>
<body>

<select>
	<option value="en">English</option>
    <option value="vn">Vietnamese</option>
    <option value="th">Thai</option>
</select>

</body>
</html>

Кто-нибудь знает, как решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Вы можете решить эту проблему с помощью минимального jquery: ms-Dropdown делает работу намного проще. Просто установите изображение флага в качестве заголовка опции выбора и при необходимости измените ширину / высоту изображения. После добавления плагина требуется только одна строка кода: 

$("body select").msDropDown(); /* to trigger the function. Adjust as necessary (you might not want to use it on all of the selects in the body*/

Пример: 

#flags {
  width: 100px;
}

img {
  max-height: 30px;
}

<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
<link href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/css/msdropdown/dd.css" rel="stylesheet" />


<select name="flags" id="flags">
  <option selected value="English" title="https://www.countryflags.io/gb/flat/24.png"></option>
  <option value="Vietmanese" title="https://www.countryflags.io/vn/flat/24.png"></option>
  <option class="pic" value="Thao" title="https://www.countryflags.io/th/flat/24.png"></option>
</select>

См. fiddle

0 голосов
/ 21 апреля 2020

option[value="English"] захватывает только теги с данным атрибутом, поэтому вы должны использовать <option value="English>English</option>.

Вы также должны использовать псевдо-селектор ::before (или ::after), так что вы не должны t перезаписать содержимое элемента <option>.

Как и в связанном ответе, это не работает для элементов <option>, если только для атрибута size для select не установлено значение, отличное от 1. <select size="3"> может работать, в зависимости от того, что вы хотите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...