<!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">
<link rel="stylesheet" href="style.css">
</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.
-->
<input id='X' type='radio' class='rad' name='rad' value="" checked>
<label class='opt' for='X'>
<i class='em em-us'></i> United States
</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>
</summary>
</details>
</fieldset>
</form>
<!--|For Demonstration Purposes
Provides console
-->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="script.js"></script>
</body>
</html>
var xC = document.forms.container;
var xE = xC.elements;
var vR = xE.rad;
/*
Get the string saved in localStorage named 'country'
*/
var cty = localStorage.getItem('country');
/*| When <form> is changed
Call saveCountry()
*/
xC.addEventListener('change', saveCountry);
/*| When Page is Reloaded
Call setCountry()
*/
document.addEventListener('DOMContentLoaded', setCountry);
/*
Save the value selected in pseudo-<select> in localStorage
*/
function saveCountry(e) {
localStorage.setItem('country', vR.value);
console.log("Welcome, " + vR.value);
};
/*
Loop through the pseudo-<option>s
When a pseudo<option> matches the value saved...
in localStorage under the name of 'country'...
check that pseudo-<option> by assigning it...
the attribute [checked] = true
*/
function setCountry(e) {
for (let i = 0; i < vR.length; i++) {
if (vR[i].value === cty) {
vR[i].checked = true;
}
}
console.log("Welcome, " + vR.value);
};
html,
body {
font: 400 small-caps 16px/1.25 Arial;
}
fieldset {
width: fit-content;
padding: 0;
}
legend {
font-size: 1rem
}
details {
width: 170px;
cursor: pointer;
margin: 0 4px -5px 0;
padding: 0 5px 10px 10px;
}
summary {
width: 100%;
position: relative;
}
/*
Shows <detail>'s default arrow
*/
/*
summary::-webkit-details-marker {
position: absolute;
padding: 0 0 0 5px;
z-index: 1;
top: 25%;
}
[open] summary::-webkit-details-marker {
top: 5%;
}
.em {
padding: 0 0 0 10px;
}
*/
/*
Hides <detail>'s default arrow
*/
summary::-webkit-details-marker {
visibility: hidden;
position: absolute;
z-index: -1;
}
.em {
padding: 0;
}
/*| 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;
position: relative;
z-index: 2;
width: 100%;
margin: 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 {
max-height: 50%;
font-variant: normal;
}