diff --git a/docs/docs.css b/docs/docs.css
index a38ce5b..4e675ac 100644
--- a/docs/docs.css
+++ b/docs/docs.css
@@ -116,6 +116,18 @@ button.active {
     inset -2px -2px #dfdfdf, inset 2px 2px #808080;
 }
 
+.combo-box.key-nav > input[aria-haspopup] ~ ul > li[aria-selected=true] {
+  color: #fff;
+  background-color: #000080;
+}
+
+div.key-nav > ul[role=listbox] > li[aria-current=true],
+div.key-nav > ul[role=listbox] > li:hover:not([aria-selected=true]),
+div:not(.key-nav) > input[aria-haspopup] ~ ul:has([aria-current=true]) > li[aria-selected=true]:not([aria-current=true]) {
+  color: inherit;
+  background-color: inherit;
+}
+
 @media (max-width: 480px) {
   aside {
     display: none;
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 442af08..3b87093 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -31,7 +31,8 @@
           <li><a href="#group-box">GroupBox</a></li>
           <li><a href="#text-box">TextBox</a></li>
           <li><a href="#slider">Slider</a></li>
-          <li><a href="#dropdown">Dropdown</a></li>
+          <li><a href="#combo-box">ComboBox</a></li>
+          <li><a href="#list-box">ListBox</a></li>
           <li>
             <a href="#window">Window</a>
             <ul>
@@ -467,28 +468,87 @@
     </section>
 
     <section class="component">
-      <h3 id="dropdown">Dropdown</h3>
+      <h3 id="combo-box">ComboBox</h3>
       <div>
         <blockquote>
-          A <em>drop-down list box</em> allows the selection of only a
-          single item from a list. In its closed state, the control displays
-          the current value for the control. The user opens the list to change
-          the value.
+          A <em>combo box</em> combines a text box with a list box. This allows the user to type an entry or choose one from the list.
 
           <footer>
-            &mdash; Microsoft Windows User Experience p. 175
+            &mdash; Microsoft Windows User Experience p. 183
+          </footer>
+        </blockquote>
+
+        <p>
+          There are 2 ways you can render a combo box. The first is using a text <code>input</code>, a parent <code>ul</code>, and children <code>li</code> together, wrapped inside a container element with the <code>combo-box</code> class. For accessibility, follow the minimum requirements below: 
+        </p>
+
+        <ul>
+          <li>Add a <code>role="combobox"</code> attribute to the text <code>input</code></li>
+          <li>Add a <code>role="listbox"</code> attribute to the <code>ul</code></li>
+          <li>Add a <code>role="option"</code> attribute to each <code>li</code></li>
+          <li>
+            Specify the relationship between the list box and the text box by combining the <code>id</code> of the <code>listbox</code> with the <code>aria-controls</code> attribute on the text <code>input</code>
+          </li>
+        </ul>
+
+        <%- example(`
+          <div class="combo-box" style="width: fit-content">
+            <input type="text" id="example${getNewId()}-input" role="combobox" value="Regular" aria-controls="example${getCurrentId()}-listbox" />
+            <ul role="listbox" id="example${getCurrentId()}-listbox" tabindex="-1">
+              <li role="option" aria-selected="true">Regular</li>
+              <li role="option">Italic</li>
+              <li role="option">Bold</li>
+              <li role="option">Bold Italic</li>
+            </ul>
+          </div>
+        `) %>
+
+        <p>
+          The second adds a <code>button</code> to toggle the visibility of the drop-down. For accessibility, follow these additional requirements:
+        </p>
+
+        <ul>
+          <li>Add <code>aria-haspopup="listbox"</code> and <code>aria-expanded</code> attributes to the text <code>input</code></li>
+        </ul>
+
+        <%- example(`
+          <div class="combo-box" style="width: fit-content">
+            <input type="text" id="example${getNewId()}-input" role="combobox" value="h:mm:ss tt" aria-haspopup="listbox" aria-expanded="false" aria-controls="example${getCurrentId()}-listbox" />
+            <button type="button" tabindex="-1"></button>
+            <ul role="listbox" id="example${getCurrentId()}-listbox" tabindex="-1">
+              <li role="option" aria-selected="true">h:mm:ss tt</li>
+              <li role="option">hh:mm:ss tt</li>
+              <li role="option">H:mm:ss</li>
+              <li role="option">HH:mm:ss</li>
+            </ul>
+          </div>
+        `) %>
+
+        <p>
+          For more options of the list box, see the <a href="#list-box">ListBox</a> section.
+        </p>
+      </div>
+    </section>
+
+    <section class="component">
+      <h3 id="list-box">ListBox</h3>
+      <div>
+        <blockquote>
+          A <em>list box</em> is a control for displaying a list of choices for the user.
+
+          <footer>
+            &mdash; Microsoft Windows User Experience p. 170
           </footer>
         </blockquote>
 
         <p>
-          Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
-          elements.
+          The simplest way to render a list box is by using the <code>select</code> element with a <code>multiple</code> attribute specified.
         </p>
 
         <%- example(`
-          <select>
+          <select multiple>
             <option>5 - Incredible!</option>
-            <option>4 - Great!</option>
+            <option selected>4 - Great!</option>
             <option>3 - Pretty good</option>
             <option>2 - Not so great</option>
             <option>1 - Unfortunate</option>
@@ -496,19 +556,131 @@
         `) %>
 
         <p>
-          By default, the first option will be selected. You can change this by
-          giving one of your <code>option</code> elements the <code>selected</code>
-          attribute.
+          The complex way is using a combination of the <code>ul</code>/<code>li</code> elements with the role attributes.
         </p>
 
         <%- example(`
-          <select>
-            <option>5 - Incredible!</option>
-            <option>4 - Great!</option>
-            <option selected>3 - Pretty good</option>
-            <option>2 - Not so great</option>
-            <option>1 - Unfortunate</option>
-          </select>
+          <ul role="listbox" tabindex="0" style="width: fit-content">
+            <li role="option" aria-selected="true">Bitmap Image</li>
+            <li role="option">Image Document</li>
+            <li role="option">Media Clip</li>
+            <li role="option">Wave Sound</li>
+            <li role="option">WordPad Document</li>
+          </ul>
+        `) %>
+
+        <p>
+          To remove the scroll bar of the list box, use the <code>no-scroll</code> class.
+        </p>
+
+        <%- example(`
+          <ul role="listbox" class="no-scroll" tabindex="0" style="width: 150px">
+            <li role="option">Edit</li>
+            <li role="option">Open</li>
+            <li role="option">Print</li>
+          </ul>
+        `) %>
+
+        <blockquote>
+          A <em>drop-down list box</em> allows the selection of only a single item from a list; the difference is that the list is displayed on demand. In its closed state, the control displays the current value for the control.
+
+          <footer>
+            &mdash; Microsoft Windows User Experience p. 175
+          </footer>
+        </blockquote>
+
+        <p>
+          A drop-down can be rendered in 2 ways. The first is using the native <code>select</code> and <code>option</code>. The second is using a text <code>input</code>, a <code>button</code>, a parent <code>ul</code>, and children <code>li</code> together, wrapped inside a container element with the <code>list-box</code> class. For accessibility, follow the minimum requirements below:
+        </p>
+
+        <ul>
+          <li>Add <code>aria-haspopup="listbox"</code> and <code>aria-expanded</code> attributes to the text <code>input</code></li>
+          <li>
+            Specify the relationship between the list box and the text box by combining the <code>id</code> of the <code>listbox</code> with the <code>aria-controls</code> attribute on the text <code>input</code>
+          </li>
+        </ul>
+
+        <%- example(`
+          <div class="list-box" style="width: fit-content">
+            <input type="text" id="example${getNewId()}-input" aria-haspopup="listbox" value="True Color (24 bit)" aria-expanded="false" aria-controls="example${getCurrentId()}-listbox" readonly />
+            <button type="button" tabindex="-1"></button>
+            <ul id="example${getCurrentId()}-listbox" role="listbox" tabindex="-1">
+              <li role="option">Monochrome</li>
+              <li role="option">16 Color</li>
+              <li role="option">256 Color</li>
+              <li role="option">High Color (16 bit)</li>
+              <li role="option" aria-selected="true">True Color (24 bit)</li>
+            </ul>
+          </div>
+        `) %>
+
+        <blockquote>
+          Although most list boxes are single-selection lists, some contexts require the user to choose more than one item. <em>Multiple-selection list boxes</em> support this functionality.
+
+          <footer>
+            &mdash; Microsoft Windows User Experience p. 176
+          </footer>
+        </blockquote>
+
+        <p>A multiple-selection list box can be rendered by adding the <code>aria-multiselectable</code> attribute to the <code>listbox</code>, along with checkboxes.</p>
+
+        <%- example(`
+          <ul role="listbox" tabindex="0" aria-multiselectable="true" style="width: fit-content">
+            <li role="option">
+              <input type="checkbox" id="example${getNewId()}-checkbox-1" tabindex="-1">
+              <label for="example${getCurrentId()}-checkbox-1">Yearly Statistic</label>
+            </li>
+            <li role="option">
+              <input type="checkbox" id="example${getCurrentId()}-checkbox-2" tabindex="-1">
+              <label for="example${getCurrentId()}-checkbox-2">Financial Summary</label>
+            </li>
+            <li role="option">
+              <input type="checkbox" id="example${getCurrentId()}-checkbox-3" tabindex="-1">
+              <label for="example${getCurrentId()}-checkbox-3">Samson Account</label>
+            </li>
+            <li role="option">
+              <input type="checkbox" id="example${getCurrentId()}-checkbox-4" tabindex="-1">
+              <label for="example${getCurrentId()}-checkbox-4">Lukison Review</label>
+            </li>
+          </ul>
+        `) %>
+
+        <p>Group options by wrapping them in a <code>ul</code> with parent <code>li</code> with the <code>role="group"</code> attribute.
+          To label a group of options, use a child <code>span</code> inside the parent <code>li</code> and reference its id in the <code>aria-labelledby</code> attribute of the <code>li</code>.</p>
+
+        <%- example(`
+          <ul role="listbox" tabindex="0" aria-multiselectable="true" style="width: fit-content">
+            <li role="group" aria-labelledby="example${getNewId()}-group-1">
+              <span id="example${getCurrentId()}-group-1">Browsing</span>
+              <ul>
+                <li role="option">
+                  <input type="checkbox" id="example${getCurrentId()}-checkbox-1" tabindex="-1">
+                  <label for="example${getCurrentId()}-checkbox-1">Enable page transitions</label>
+                </li>
+                <li role="option">
+                  <input type="checkbox" id="example${getCurrentId()}-checkbox-2" tabindex="-1">
+                  <label for="example${getCurrentId()}-checkbox-2">Use smooth scrolling</label>
+                </li>
+              </ul>
+            </li>
+            <li role="group" aria-labelledby="example${getCurrentId()}-group-2">
+              <span id="example${getCurrentId()}-group-2">Multimedia</span>
+              <ul>
+                <li role="option">
+                  <input type="checkbox" id="example${getCurrentId()}-checkbox-3" tabindex="-1">
+                  <label for="example${getCurrentId()}-checkbox-3">Play animations</label>
+                </li>
+                <li role="option">
+                  <input type="checkbox" id="example${getCurrentId()}-checkbox-4" tabindex="-1">
+                  <label for="example${getCurrentId()}-checkbox-4">Play sounds</label>
+                </li>
+                <li role="option">
+                  <input type="checkbox" id="example${getCurrentId()}-checkbox-5" tabindex="-1">
+                  <label for="example${getCurrentId()}-checkbox-5">Show pictures</label>
+                </li>
+              </ul>
+            </li>
+          </ul>
         `) %>
       </div>
     </section>
@@ -1126,4 +1298,5 @@
     </p>
   </main>
 </body>
+<script src="script.js"></script>
 </html>
diff --git a/docs/script.js b/docs/script.js
new file mode 100644
index 0000000..0b54507
--- /dev/null
+++ b/docs/script.js
@@ -0,0 +1,120 @@
+// List Boxes & Combo Boxes
+document.querySelectorAll('ul[role=listbox]').forEach(listbox => {
+    const input = document.getElementById(listbox.id.replace('-listbox', '-input'));
+    const expands = input?.hasAttribute('aria-haspopup');
+    const multiselect = listbox.hasAttribute('aria-multiselectable');
+    const options = Array.from(listbox.querySelectorAll('li[role="option"], li[role="group"] span'));
+    let currentIndex = findIndex(), current = null;
+
+    function findIndex() {
+        let index = options.findIndex(option => option.getAttribute('aria-current') === "true");
+        if (index === -1 && !multiselect) {
+            index = options.findIndex(option => option.getAttribute('aria-selected') === "true");
+        } return index;
+    }
+
+    function scroll() {
+        const index = currentIndex === -1 ? 0 : currentIndex;
+        options[index].scrollIntoView({ block: "nearest", behavior: "instant" });
+    }
+
+    function removeCurrent() {
+        current?.setAttribute('aria-current', 'false'), current = null;
+    }
+
+    function updateCurrent(value = null) {
+        if (input) { // Input-based listbox: update input value and aria-selected
+            if (value !== null) input.value = value;
+            options.forEach(option => option.setAttribute(
+                'aria-selected', option.textContent.trim() === input.value.trim() ? 'true' : 'false'
+            ));
+        } else { // Non-input-based listbox: use current for aria-current
+            current = options[currentIndex];
+            !multiselect ? 
+                options.forEach(option => option.setAttribute('aria-selected', option === current ? 'true' : 'false')) :
+                (options.forEach(option => option.setAttribute('aria-current', 'false')), current.setAttribute('aria-current', 'true'));
+        } (currentIndex = findIndex()) !== -1 && scroll();
+    }
+
+    function toggleDropdown() {
+        const isOpen = input.getAttribute('aria-expanded') === "true";
+        input.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+        input.focus();
+        !isOpen ? (currentIndex = findIndex(), scroll()) : removeCurrent();
+    }
+
+    function toggleCheck() {
+        const checkbox = current?.querySelector('input[type="checkbox"]');
+        checkbox && (checkbox.checked = !checkbox.checked, current.setAttribute('aria-selected', checkbox.checked ? 'true' : 'false'));
+    }
+
+    function navigationHandler(event) {
+        expands && (listbox.parentElement.classList.add('key-nav'), current && (currentIndex = options.indexOf(current), removeCurrent()));
+
+        if (event.altKey && (event.key === "ArrowDown" || event.key === "ArrowUp") && expands) {
+            event.preventDefault();
+            toggleDropdown();
+        } else if ((event.key === "ArrowDown" && currentIndex < options.length - 1) || (event.key === "ArrowUp" && currentIndex > 0)) {
+            event.preventDefault();
+            currentIndex += event.key === "ArrowDown" ? 1 : -1;
+            updateCurrent(options[currentIndex].textContent);
+        } else if (event.key === "Enter" && current?.role !== "group") {
+            event.preventDefault();
+            multiselect ? toggleCheck() : input && input.getAttribute('aria-expanded') === "true" &&
+                (current = options[currentIndex], updateCurrent(current?.textContent), listbox.parentElement.classList.remove('key-nav'), toggleDropdown());
+        } else if ((event.key === "Home" || event.key === "End") && !listbox.parentElement.classList.contains('combo-box')) {
+            event.preventDefault();
+            currentIndex = event.key === "Home" ? 0 : options.length - 1;
+            updateCurrent(options[currentIndex].textContent);
+        }
+    }
+
+    listbox.addEventListener('click', (event) => {
+        if (!input) listbox.focus();
+
+        let target = event.target.tagName === "INPUT" || event.target.tagName === "LABEL"
+            ? event.target.closest('li[role="option"]') : event.target;
+
+        if (target.tagName === "LI" && target.getAttribute('role') === "option" || target.tagName === "SPAN") {
+            currentIndex = Array.from(options).indexOf(target);
+            current = options[currentIndex];
+            updateCurrent(current.textContent);
+            expands ? toggleDropdown() : (multiselect && toggleCheck());
+        }
+    });
+
+    if (!input) {
+        listbox.addEventListener('keydown', navigationHandler);
+        listbox.addEventListener('mousedown', removeCurrent);
+        listbox.addEventListener('focus', () => currentIndex === -1 && (currentIndex = 0, updateCurrent()));
+    } else {
+        input.addEventListener('input', () => updateCurrent(input.value));
+        input.addEventListener('keydown', navigationHandler);
+        listbox.addEventListener('mousedown', (e) => (e.preventDefault(), input.focus()));
+
+        if (expands) {
+            const button = listbox.parentElement.querySelector('button');
+
+            function mouseHandler(event) {
+                if (event.target.tagName !== "LI") return;
+                listbox.parentElement.classList.contains('key-nav')
+                    ? listbox.parentElement.classList.remove('key-nav')
+                    : removeCurrent();
+                current = event.target;
+                current.setAttribute('aria-current', 'true');
+            }
+
+            listbox.addEventListener('mousemove', mouseHandler);
+            listbox.addEventListener('mouseover', mouseHandler);
+
+            button.addEventListener('click', toggleDropdown);
+            input.addEventListener('blur', () => {
+                if (input.getAttribute('aria-expanded') === "true") {
+                    setTimeout(() => {
+                        if (![input, button].includes(document.activeElement)) toggleDropdown();
+                    }, 0);
+                }
+            });
+        }
+    }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 8c74873..b8be381 100644
--- a/style.css
+++ b/style.css
@@ -112,6 +112,7 @@ textarea,
 select,
 option,
 table,
+ul[role=listbox],
 ul.tree-view,
 .window,
 .title-bar,
@@ -480,7 +481,7 @@ input[type="url"],
 input[type="tel"],
 input[type="number"],
 input[type="search"],
-select,
+select:not([multiple]),
 textarea {
   padding: 3px 4px;
   border: none;
@@ -499,7 +500,7 @@ input[type="email"],
 input[type="url"],
 input[type="tel"],
 input[type="search"],
-select {
+select:not([multiple]) {
   height: 21px;
 }
 input[type="number"] {
@@ -544,7 +545,7 @@ textarea:disabled {
   background-color: var(--surface);
 }
 
-select {
+select:not([multiple]) {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -677,19 +678,237 @@ input[type="range"]::-moz-range-track {
   transform: translateY(0px) scaleX(-1);
 }
 
-select:focus {
+select:focus:not([multiple]) {
   color: var(--button-highlight);
   background-color: var(--dialog-blue);
 }
+
+select[multiple] option {
+  padding: 2px;
+}
+
 select:focus option {
   color: #000;
   background-color: #fff;
 }
 
-select:active {
+select:active:not([multiple]) {
   background-image: svg-load("./icon/button-down-active.svg");
 }
 
+.combo-box {
+  display: flex;
+  flex-direction: column;
+}
+
+.list-box,
+.combo-box.drop-down,
+.combo-box:has(input[aria-haspopup]) {
+  position: relative;
+  box-shadow: var(--border-field);
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  padding: 2px;
+  background: var(--button-highlight);
+}
+
+ul[role=listbox] {
+  background: #fff;
+  border: 2px groove transparent;
+  border-image: svg-load('./icon/sunken-panel-border.svg') 2;
+  box-sizing: border-box;
+  overflow-y: scroll;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+ul[role=listbox].no-scroll {
+  overflow-y: auto;
+}
+
+ul[role=listbox] > li,
+ul[role=listbox] li[role=group] {
+  padding: 0 32px 0 4px;
+  white-space: nowrap;
+  color: var(--text-color);
+}
+
+ul[role=listbox] > li[role=option] {
+  padding-block: 2px;
+}
+
+ul[role=listbox]:focus-within {
+  outline: none;
+}
+
+ul[role=listbox] > li[aria-current=true],
+ul[role=listbox]:not([aria-multiselectable]) > li[aria-selected=true],
+.combo-box > input[aria-haspopup] ~ ul > li:hover {
+  color: #fff;
+  background-color: var(--dialog-blue);
+}
+
+.list-box > input[aria-haspopup]:read-only {
+  color: var(--text-color);
+  background-color: #fff;
+}
+
+.list-box > input[aria-haspopup]:read-only::selection {
+  color: inherit;
+  background-color: inherit;
+}
+
+.list-box > input[aria-haspopup],
+.combo-box > input[aria-haspopup] {
+  height: 17px;
+  flex: 1;
+  box-shadow: none;
+}
+
+:not(.combo-box) ul[role=listbox]:not([aria-multiselectable]):focus > li[aria-selected=true],
+.list-box > input[aria-expanded=true] ~ ul[role=listbox] > li[aria-selected=true],
+.list-box > input[aria-haspopup] ~ ul > li[aria-current=true],
+ul[role=listbox][aria-multiselectable]:focus > li[role=option][aria-current=true] {
+  outline: 1px dotted yellow;
+  outline-offset: -1px;
+}
+
+.list-box > input[aria-haspopup] ~ ul:has([aria-current=true]) > li[aria-selected=true]:not([aria-current=true]) {
+  outline: none;
+}
+
+.list-box > input[aria-expanded=false]:focus {
+  background-color: var(--dialog-blue);
+  color: #fff;
+  outline: 1px dotted yellow;
+  outline-offset: -2px;
+  clip-path: inset(1px);
+}
+
+.list-box > button,
+.combo-box > button {
+  width: 16px;
+  height: 17px;
+  background-image: svg-load("./icon/button-down.svg");
+  background-repeat: no-repeat;
+  min-width: unset;
+  min-height: unset;
+  box-shadow: none;
+  padding: 0;
+}
+
+.list-box > button:focus, .combo-box > button:focus,
+.list-box > button:active, .combo-box > button:active {
+  outline: none;
+  box-shadow: none;
+}
+
+.list-box > input[aria-expanded=false] + button:active,
+.combo-box > input[aria-expanded=false] + button:active {
+  background-image: svg-load("./icon/button-down-active.svg");
+}
+
+.list-box > ul,
+.combo-box > input[aria-haspopup] ~ ul {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  border: 1px solid #000;
+  overflow-y: auto;
+}
+
+.list-box > input[aria-expanded=true] ~ ul,
+.combo-box > input[aria-expanded=true] ~ ul {
+  display: block;
+}
+
+.list-box > input,
+ul[role=listbox],
+.combo-box > input:not([aria-haspopup]),
+.combo-box > input[aria-expanded=true] {
+  cursor: default;
+}
+
+ul[role=listbox][aria-multiselectable] > li[role=option] {
+  display: flex;
+  align-items: center;
+  padding-block: 2px;
+}
+
+ul[role=listbox][aria-multiselectable] li[role=option] > input[type=checkbox] + label {
+  margin-left: calc(var(--checkbox-width) + 3px);
+}
+
+ul[role=listbox][aria-multiselectable] li[role=option] > input[type=checkbox] + label::before {
+  box-shadow: none;
+  outline: 1px solid var(--button-shadow);
+  outline-offset: -2px;
+  clip-path: inset(1px);
+}
+
+ul[role=listbox][aria-multiselectable]:not(:focus) li[role=group] [aria-current=true],
+ul[role=listbox][aria-multiselectable]:not(:focus) li[role=group] [aria-current=true] > label {
+  color: inherit;
+  background-color: inherit;
+  outline: none;
+}
+
+ul[role=listbox][aria-multiselectable] li[role=option] > input[type="checkbox"]:active + label::before {
+  background: #fff;
+}
+
+ul[role=listbox] li[role=group] {
+  padding-top: 2px;
+}
+
+ul[role=listbox] li[role=group] ul {
+  list-style: none;
+  width: 100%;
+  padding-left: 14px;
+  padding-block: 2px;
+}
+
+ul[role=listbox][aria-multiselectable] li[role=group] ul > li[role=option] > input[type="checkbox"] + label::before {
+  outline: 2px solid #000;
+  clip-path: none;
+}
+
+ul[role=listbox] li[role=group]:not(:has(+ li)) > ul {
+  padding-bottom: 0;
+}
+
+li[role=group] > ul > li[role=option] > label,
+li[role=group] > span {
+  padding: 2px;
+}
+
+ul[role=listbox]:not([aria-multiselectable]) li[role=group] > ul > li[role=option] {
+  width: fit-content;
+  padding: 2px;
+}
+
+ul[role=listbox]:not([aria-multiselectable]) li[role=group] [aria-selected=true] {
+  background-color: var(--surface);
+}
+
+li[role=group] > span[aria-current=true],
+li[role=group] [aria-current=true] > label,
+ul[role=listbox]:not([aria-multiselectable]):focus li[role=group] [aria-selected=true] {
+  color: #fff;
+  background-color: var(--dialog-blue);
+  outline: 1px dotted yellow;
+  outline-offset: -1px;
+}
+
+ul[role=listbox][aria-multiselectable]:not(:focus) > li[role=option][aria-current=true] {
+  background-color: var(--dialog-blue);
+  color: #fff;
+}
+
 a {
   color: var(--link-blue);
 }