Skip to content

Instantly share code, notes, and snippets.

@roipoussiere

roipoussiere/index.html

Last active May 3, 2024 14:52
Show Gist options
  • Save roipoussiere/4a3ff0c40201b9f8b2ac7ffd11feb0a7 to your computer and use it in GitHub Desktop.
Save roipoussiere/4a3ff0c40201b9f8b2ac7ffd11feb0a7 to your computer and use it in GitHub Desktop.
Download ZIP
No-JS drop-down list that submits updated value to the server.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
label, a {
font-family: sans-serif;
}
#items-cb {
display: none;
}
#items-lb {
width: 7em;
padding: 0.2em;
height: 1.4em;
border-radius: 4px;
position: relative;
display: block;
background-color: #e9e9ed;
border: 1px solid black;
}
#items-lb:hover {
background-color: #d0d0d7;
}
#items-lb::after {
content: ' 🞃';
}
#items-ul {
display: none;
list-style-type: none;
padding: 2px;
margin: 0;
background-color: #f2f3f4;
border-radius: 4px;
width: 7em;
}
#items-ul li {
padding: 0.2em;
}
#items-ul li a {
width: 100%;
color: black;
text-decoration: none;
cursor: default;
display: block;
}
#items-ul li:hover, #items-ul li:target {
background-color: #bcdef0;
}
#items-cb:checked~#items-ul {
display: block;
}
:target {
background-color: red;
}
</style>
</head>
<body>
<input id="items-cb" type="checkbox"/>
<label id="items-lb" for="items-cb">Select item</label>
<ul id="items-ul">
<li id="item-1"><a href="?item=1#item-1">Item 1</a></li>
<li id="item-2"><a href="?item=2#item-2">Item 2</a></li>
<li id="item-3"><a href="?item=3#item-3">Item 3</a></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment