2

I tried to add images into DropDownList for each items in it, using only HTML and CSS. Here is my code, but it doesn't work.

<!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>

Does anybody know how to solve this issue?

matthias_h
  • 11,356
  • 9
  • 22
  • 40
Minh Tran
  • 33
  • 4
  • Write three backticks ` before and after your code to format your code correctly. You can see more formatting tips [here](https://stackoverflow.com/editing-help). – Frank Vel Apr 21 '20 at 13:52
  • @FrankVel Thank you so much for the tip, i have updated my post. – Minh Tran Apr 21 '20 at 14:02
  • Does this answer your question? https://stackoverflow.com/questions/9198195/how-can-i-use-the-css-pseudo-element-before-content-to-affect-an-option – Frank Vel Apr 21 '20 at 14:06
  • that solution only partially solved my problem, i think i must use Javascript/Jquery instead. thank you – Minh Tran Apr 21 '20 at 14:25

2 Answers2

0

option[value="English"] only captures tags with the given attribute, so you should use <option value="English>English</option>.

You should also use the ::before (or ::after) pseudo-selector, so you don't overwrite the content of the <option> element.

As in the linked response, this doesn't work for <option> elements unless you set the size attribute for select to something other than 1. <select size="3"> might work, depending on what you want.

Frank Vel
  • 1,202
  • 1
  • 13
  • 27
  • yes, i have tried using the solution with the size="3", it works. But it doesn't work in the way i want, it is no longer a dropdownlist anymore, so i think i must find another solutions. Thank you! – Minh Tran Apr 21 '20 at 14:28
0

You can solve this issue by using minimal jquery: the ms-Dropdown makes the job a lot of easier. Simply set the the flag image as the title of the select option, and style the width/image height as appropriate. After adding the plugin, only one line of code is required: 

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

Example:

#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>

See fiddle

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81