<ul role="listbox">
<li role="option" class="active" tabindex="0">CSS</li>
<li role="option" tabindex="-1">JavaScript</li>
<li role="option" tabindex="-1">React</li>
<li role="option" tabindex="-1">Vue</li>
<li role="option" tabindex="-1">SVG</li>
<li role="option" tabindex="-1">Animation</li>
<li role="option" tabindex="-1">Canvas</li>
<li role="option" tabindex="-1">Mobile</li>
</ul>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-family: "Exo", Arial, sans-serif;
background-color: #220;
color: #fff;
transition: all 150ms linear;
}
ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
li {
display: flex;
align-items: center;
position: relative;
min-height: 30px;
cursor: pointer;
}
li:not(:last-child) {
margin-bottom: 5px;
}
li::before {
content: "";
display: inline-flex;
width: 24px;
height: 24px;
border-radius: 4px;
margin-right: 10px;
border: 1px solid currentColor;
}
li[tabindex="0"],
li:focus {
color: #f36;
text-decoration: line-through;
font-weight: 500;
}
li[tabindex="0"]::before,
li:focus::before {
background: url("data:image/png;base64,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")
no-repeat center;
background-size: 20px 20px;
}
const listbox = document.querySelector('[role="listbox"]');
listbox.addEventListener("click", (event) => {
const option = event.target.closest("li");
if (!option) return;
option.focus();
});
listbox.addEventListener("keydown", (event) => {
const { key } = event;
if (key !== "ArrowDown" && key !== "ArrowUp") return;
event.preventDefault();
const option = event.target;
let selectedOption;
if (key === "ArrowDown") selectedOption = option.nextElementSibling;
if (key === "ArrowUp") selectedOption = option.previousElementSibling;
if (selectedOption) {
selectedOption.focus();
document.querySelectorAll("li").forEach((element) => {
element.setAttribute("tabindex", -1);
});
selectedOption.setAttribute("tabindex", 0);
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.