Add flag image to select option
11,426
It's Difficult to Customize <select>
& <option>
Tags
<select>
and <option>
tags are difficult to customize and anything that holds true for one browser is never true for the rest of them.
Solution
- Forget about customizing
<select>
, create a pseudo-<select>
✱ using<details>
and<summary>
<select>
<details>
& <summary>
<select>
- Forget about customizing
<option>
, create a pseudo-<option>
✱ using<input type='radio'>
and<label>
<option>
<input type='radio'>
& <label>
<option>
✱The pseudo-<select>
and pseudo-<option>
tags will be close in appearance and behavior to that of the standard <select>
and <option>
tags. More importantly, it can store and process a value
, and it can be registered to the change
event.
Demo
Details are commented in demo
/*| For Demonstration Purposes
This is a test to prove that this pseudo-<select> functions like
a real <select> by logging the value of the selected pseudo-
<option> to the console.
*/
var xC = document.forms.container;
var xE = xC.elements;
var vR = xE.rad;
xC.onchange = function() {
console.log(vR.value);
}
html,
body {
font: 400 small-caps 16px/1.25 Arial;
}
fieldset {
width: fit-content;
padding: 0;
}
legend {
font-size: 1rem
}
details {
width: 150px;
cursor: pointer;
margin: 0 4px -5px 0;
padding: 0 0 0 10px;
}
summary {
position: relative;
width: 96%;
outline: 0.5px ridge grey;
}
/*
Hides <detail>'s default arrow
*/
details summary {
list-style: none;
}
details summary::marker {
display: none;
}
/*| Pseudo-<option>
All pseudo-<option> are initially hidden and
<label class='opt'> are the only tags that will show/hide,
the next comment explains how.
*/
.rad {
display: none
}
.opt {
display: none;
margin: 0 0 2px 0;
cursor: pointer;
font-size: 0.9rem;
box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) inset;
}
/*| Two Conditions
1. If <details open='true'> all <label class='opt'> are visible.
=============================================
2. if <input class='rad' type='radio' checked> then the
<label class='opt'> that proceeds the radio button is visible.
*/
[open] .opt,
.rad:checked+.opt {
display: block;
}
/*| For Demonstration Purposes
This ruleset changes how the console is displayed.
*/
.as-console-wrapper {
width: 50%;
min-height: 100%;
margin-left: 50%;
font-variant: normal;
}
.as-console-row.as-console-row::after {
content: '';
padding: 0;
margin: 0;
border: 0;
width: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom select box Jquery Plugin by VJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<!--| Flag Icons
This stylesheet provides the flag icons.
For details, go to:
https://afeld.github.io/emoji-css/
-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
</head>
<body>
<form id="container">
<fieldset>
<legend>Country</legend>
<!--| Pseudo-<select>
<details> provides the dropdown behavior and
<summary> contains the pseudo-<option>
-->
<details>
<summary>
<!--| 4 Pseudo-<option>
Each <label> and <input type='radio'> pair are
synced to each other by matching the values of
<label for="ID"> and <input id="ID">.
-->
<!--| Trigger and State
When <label> is clicked ... <input type='radio'>
is checked. This simple "cause and effect" can
be leveraged into a system of states (ie off/on).
For details, review the CSS.
-->Origin
</summary>
<input id='X' type='radio' class='rad' name='rad' value="" checked>
<label class='opt' for='X'>
╍╍╍╍╍╍╍╍╍
</label>
<input id='US' type='radio' class='rad' name='rad' value="United States">
<label class='opt' for='US'>
<i class='em em-us'></i>
United States
</label>
<input id='GB' type='radio' class='rad' name='rad' value="Great Britain">
<label class='opt' for='GB'>
<i class='em em-gb'></i>
Great Britain
</label>
<input id='IN' type='radio' class='rad' name='rad' value="India">
<label class='opt' for='IN'>
<i class='em em-flag-in'></i>
India
</label>
<input id='NP' type='radio' class='rad' name='rad' value="Nepal">
<label class='opt' for='NP'>
<i class='em em-flag-np'></i>
Nepal
</label>
</details>
</fieldset>
</form>
</body>
</html>
Author by
rrr
Updated on June 04, 2022Comments
-
rrr almost 2 years
Good day! Im a newbie. Im trying to add image in the option tag in the select. but when i run the code. It doesnt show the image. can someone help me? thank you
This is the code:
HTML:
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Custom select box Jquery Plugin by VJ</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="selected-item"> <p>You Selected Country : <span>Select</span></p> </div> <select name="" id="cusSelectbox"> <option value="Select">Select</option> <option value="India"><img src="https://static.webshopapp.com/shops/094414/files/054959460/the-united-states-flag-icon-free-download.jpg">India</option> <option value="Nepal">Nepal</option> </select> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
-
brooksrelyt over 5 yearsYour question has already been answered here
-
-
rrr over 5 yearsThank you so muchhhh! :)
-
rrr over 5 yearshow about if i choose great britain i want great britain to be checked in input radio and not ---------?
-
zer00ne over 5 yearsHi @rrr , are you referring to the
[checked]
attribute on#X
? That's just there to set what is selected initially so if you prefer#GB
to be selected once the page is loaded then add the[checked]
attribute to#GB
and remove[checked]
attribute from#X
. In fact, if you don't need#X
at all, you can just remove it entirely. -
rrr over 5 yearshello. cause i will use it for the language switcher. for example i make the english default selected. but how about the others? if i click the gb when i do refresh i want gb as default selected already and not the english anymore
-
rrr over 5 yearscan you help me how to solve it? im really so sorry :(
-
zer00ne over 5 years@rrr A persistent default goes beyond the scope of this question. I'll be happy to assist you, but you'll need to post another question. Include a reference to this answer in the new question.
-
rrr over 5 yearsI did ask the question
-
rrr over 5 years