one day of code

Filter static list using css

January 04, 2021

Filter static list by “using” the gpu :) The three downsides to this are:

  • screen readers are not able to read the total number of items
  • inability to use the relationship operators
  • keyboard navigation will probably take you through all the items (depending on js implementation) and screen reader will not announce them as they are display: none;
<!-- This will serve as a list filter -->
<style id="filter"></style>
<!-- Type the search term here -->
<input id="search" type="search" />
<li data-value="xyz"></li>
<!-- the rest of the list items -->
<script type="text/javascript">
// Grab the style tag
const filter = document.querySelector('#filter')
// Grab the input control
const input = document.querySelector('#search')
// Make style template to update later
const style = term => `li:not([data-value*="${term}"]) { display: none; }`
// Do the filtering on every input
e => (filter.innerText = style(,

Written by Milan Miljkovic — a tech enthusiast and design system practitioner.