If you ever tried to change the look and feel of a HTML5 datalist but couldn’t, then this post might be your (delayed) Christmas present 🎄🎁 (I hope you had a great one and close to the ones you love the most)!

What’s the problem of styling a HTML5 datalist?

At the moment of writing, it’s not possible to style a datalist directly.

Hopefully in the future, we will be able to simply use normal CSS like this:

.mr-datalist > * {
    background-color: var(--dark);
    color: var(--light);
}

For now, if you still want to use datalist, there are two ways to do it:

• An easy way, using a class from a front-end toolkit.
• A more manual way, using Vanilla JavaScript.

The CSS code above will work after implementing any of those 2 options.

Some things that might be important to you: 

• These methods might not work on iOS versions prior to the 13th. On those devices, the datalist will not change, working as it does by default.
• Both methods should be future-proof. When HTML5 data lists become easier to style, you can remove the front-end toolkit or the JavaScript code. Just keep the classes and the CSS as is.

With that aside, let’s move on with this tutorial…

The easiest way to style a datalist

You can use a front-end toolkit such as Mr.Utils.

All you have to do is, make sure you are adding the global JavaScript file js/utils.js in your page (or if you don’t want to load the entire toolkit, you can individually add dev/js/utils/utils_components.js).

After that, you need to add the correct class .mr-datalist to your datalist (not to the input) and it will magically transform it into a “search” component.

You can then style it with a CSS code similar to the one shown before.

Style a datalist with code

I mentioned that the easiest way of implementation works like magic, but of course there’s no magic behind it at all, just the correct JavaScript code.

In this post, I’ll share a simplified version of that code with you.

You can either follow the steps or jump directly to the Gist full code.

Feel free to change it to your specific needs.

1- Transform the datalist into an element that can be styled.

document.addEventListener("DOMContentLoaded", function () {
  const mrDataLists = document.querySelectorAll(".mr-datalist");
  for (let id = 0; id < mrDataLists.length; id++) {
    let mrDataList = mrDataLists[id];
    let mrDataListUL = "";
    let mrDataListClone = "";
 
    mrDataListClone =
      mrDataList
        .cloneNode(true)
        .innerHTML.replaceAll("<option", "<li")
        .replaceAll("</option>", "</li>");
    mrDataListUL = document.createElement("ul");
    mrDataListUL.id = mrDataList.id;
    mrDataListUL.className = mrDataList.className;
    mrDataListUL.innerHTML = mrDataListClone;
 
    mrDataList.replaceWith(mrDataListUL);
  }
}

In this first step, we grab all data lists that have the class .mr-datalist, but you can change it to your own.

You can even grab all data lists without exception, by replacing the class .mr-datalist with the property datalist, on the querySelectorAll (Don’t forget to change the CSS code accordingly at the end).

In this example, we transform the datalist into an unordered list. You can change that if you wish, but it should be an element with direct children. Each direct child will be a datalist option.

The replaceWith at the end finishes the transformation, but we are not done yet.

We need to create a similar “search” functionality to the one the HTML5 datalist has.

2- Make the input find content on the element.

document.addEventListener("keyup", function (e) {
  let mrDataListID = "mr-datalist";
  if (e.target.matches('input[list="'+mrDataListID+'"]')) {
    mrSearch(document.getElementById(mrDataListID), e.target);
  }
  e.stopPropagation();
});

In here, I’m assuming we know the ID of the datalist, and that we have it on the input “list” attribute. I’m assuming that because those are needed for the original datalist to work.
In this example, the ID is mr-datalist, set on the mrDataListID variable.

If for some reason you don’t know the ID, there are alternative ways to do it. On Mr.Utils for example, the “Search” component removes the original input, creates a new one and uses nextElementSibling. It does that for a reason, you can check that on the GitHub repository.

As you might notice, we are calling the function mrSearch, which will do the heavy work. 

Here is the function simplified, feel free to rename it to anything you want:

function mrSearch(t, e) {
  //t = Datalist
  //e = Input with list attribute
  let mrSearchChildren = t.children;
  if (mrSearchChildren) {
    if (e.value !== "") {
      t.style.removeProperty("display");
      for (let id = 0; id < mrSearchChildren.length; id++) {
        let mrSearchChild = mrSearchChildren[id];
        if (mrSearchChild.hasAttribute("value")) {
          //If the child does not contain any text, show the value as text.
          if (!mrSearchChild.innerText) {
            mrSearchChild.innerText = mrSearchChild.getAttribute("value");
          }
 
          //Change the input value when clicking on the child.
          mrSearchChild.addEventListener("click", function () {
            e.value = mrSearchChild.getAttribute("value");
          });
        }
        mrSearchChild.style.display = "none";
 
        //Checking the child outerHTML because I want to search text also inside the value attribute. Convert in lowercase to not be case sensitive.
        if (
          mrSearchChild.outerHTML
            .toLowerCase()
            .replace(/[^a-zA-Z0-9 ]/g, "")
            .includes(e.value.toLowerCase().replace(/[^a-zA-Z0-9 ]/g, ""))
        ) {
          mrSearchChild.style.removeProperty("display");
        }
      }
    } else {
      t.style.display = "none";
    }
  }
}

Here we changed the Input value when clicking on the element child (the datalist option that we transformed) and we’ll make the search case-insensitive.

Check the comments inside the code to better understand which parts replicate which datalist “search” feature.

Extra: If you have full control over the original datalist, you probably added a value and text to each option. If you don’t have, then this code as you covered, it copies the value into the text when no text is found.

And that’s it! Now you replicated most datalists’ functionalities and can start styling the element, with a CSS code similar to the one shown before.

3- Take it to the next level (Optional and Advanced)

If you feel inspired, now that you have full control over the code, you can add extra features! Features that not even the original datalist has.

For example:

• Show a message when no result is found.
• Bold the text while it is found on the results.
• If no exact match is found, search by each keyword instead (You can also show a message in that situation).
• Show results only after a minimum number of characters (This is a good idea to avoid connection words and code properties).

I did many of those features for Mr.Utils, you can check the part of the code here.

Might also be a good idea, to track pressing keyboard arrow keys, to select the results and improve accessibility.

Gist full code on how to style a datalist

Working example of styling datalists

I did something very similar to the methods explained above for Rydoo’s Compliance Centre and Marketplace.

I hope you enjoyed this post! I’m not sure that I will be writing something more on the blog before entering the new year, so enjoy the celebrations and let’s enter 2023 with the right footer!! 🥂🎆🥳

Comments

Since March 2020, I’ve been working for the Marketing Team at Rydoo.

Although the core website was not made by me, I did together with the team lots of changes and improvements and as time went by the website embraced my signature.

A technical signature, that has been fitting perfectly on the team’s vibe and knowhow, that I’m very happy to be part of.

We made the website more structured, scalable, optimized for search engines and easier to use by everyone involved.

One key feature is the inclusion of different platforms inside the same environment and ecosystem.
Platforms such as:

• Marketplace
• CFO Corner
• Compliance Centre

A front-end toolkit with a syntax friendly to everyone, that gives you utility classes, custom breakpoints, css variables and javascript functions.

Utilities used on Mr.Dev.’s plugins that you can also use on your own environment.

If you are using WordPress you can even install it as a plugin. You’ll get friendly options on the block editor, which allow you or your clients to use all the features without needing to know the classes or functions.

Let your visitors turn the pages!

FlipBook Block is a simple yet effective WordPress block that shows a PDF from your Media in a Flip Book.

Mr.Dev. is your provider of developing tools!

He gives you a powerful WordPress widget to display your content with many customizable layouts and options.

If you use Roksprocket then you should add editor4roks, it will make the widget/module more friendly for anyone editing on it!

With editor4roks the descriptions will have a WYSIWYG editor, to be easier to edit and links easier to put directly on the modules/widgets.

Tested on Joomla with the editors: TinyMCE, JCE and an included NicEdit.
Tested on WordPress with the editors: TinyMCE, TinyMCE Advanced and an included NicEdit.
This is not an official plugin of RocketTheme.

Portfolio and eCommerce website developed for Itemzero, a design studio specialized in the intersection between technology, information design and editorial design.

This project is heavily powered by Mr.Dev. and it’s the perfect showcase of what is possible to do when combining his framework with his frontend toolkit.

The framework allowed the use of the block editor on WooCommerce product pages.
The frontend toolkit (Mr.Utils) allowed to make specific customizations and to easily use components such as sliders and tabs inside the block editor.

And because this website uses those plugins that I developed, some other plugins that I selected and because I manage this website’s server + domain, Itemzero’s score on Google Pagespeed Insights shows excellent results.

Fazer is a new Portuguese magazine about design, their eCommerce website was designed by Carvalho Bernau and developed by me.

The development of this project showcases perfectly the combined power of WordPress‘ block editor, with Mr.Dev.’s Framework, Mr.Dev’s Theme, Mr.Utils and some custom code.

Mr.Dev.’s Theme is a boilerplate theme, that allowed using all the features of the block editor on WooCommerce pages (including products and templates), while having the default colors managed from Mr.Dev.’s Framework.

Mr.Utils with Mr.Dev.’s Framework, added extra style options to the block editor including custom utility classes. That was very handy to define variables to all sizes (font-sizes, padding, margins, etc) and have them editable from one unique place in the backend if needed.

For all the custom code, I used the file manager of Mr.Dev.’s Framework to select where to load each CSS and JS, reducing unused code for each page. This was important for speed purposes. Some PHP custom code was also created. All files can be accessed trough the Framework and edited on the backend, using WordPress’ default plugin files editor.

The custom code was important to reach some specific needs of the design, here are some examples:

• Temporarily have the homepage redirecting to the most recent product/magazine-issue.
• Align footnotes with the text, according to the position of the note in the text (on non-mobile breakpoints).
• Automatically detect the color of the most recent product and apply it as accent color on the entire site (Products’ colors are added on Mr.Dev.’s Framework, by having the variable equal to the product slug).
• Allow different svg logos for each product (Uses safe SVG).
• Enable cache for almost all the pages, regardless of the cart item count. This was made possible by having custom javascript and cookies, to detect the number of items in cart. Also detects which products, to show a “View the cart” when a product is already in the cart.
• Detect when the scroll passes the header to change the color of the logo, menu, and “Buy” buttons from white to the accent color.
• Use the alt text of an image, to tell which should be the object-position/background-position for each breakpoint.
• Highlight the sub-menus according to the scroll on the page.
• Replace default tags taxonomy in favor of authors (multiple authors).
• Automatically create categories in Afazeres/Blog matching each WooCommerce product.

A portfolio website done for a designer, author, consultant and scholar.

The biggest challenge for this project was to combine the many needs:

• All projects appear on the page, inside accordions and tabs.
• Each project still needs its unique url that opens the correspondent accordion and tab.
• Keep it easy for the client to add and organize the content.

To answer to those needs, I started a widget that would later become the Mr.Dev.’s widget.

That widget would show all five categories’ titles and descriptions in an accordion.
And on each category description another widget, showing the posts in a tabs layout.

Website designed by Carvalho Bernau and developed by me, for the architecture atelier founded by Maria Cristina Campilho.

This website was made in WordPress, using plugins and tools developed by me, such as Mr.Dev.’s Framework. It uses classes and components from Mr.Utils front-end toolkit.

Thanks to that and because I manage this website’s server + domain, Atelier Campilho’s website score on Google Pagespeed Insights shows excellent results.