{"id":2875,"date":"2022-12-27T20:10:17","date_gmt":"2022-12-27T20:10:17","guid":{"rendered":"https:\/\/marcosrego.com\/account\/?p=2875"},"modified":"2022-12-27T20:31:21","modified_gmt":"2022-12-27T20:31:21","slug":"style-datalist-options","status":"publish","type":"post","link":"https:\/\/marcosrego.com\/account\/blog\/style-datalist-options\/","title":{"rendered":"How to style a datalist and its options?"},"content":{"rendered":"\n<p>If you can&#8217;t change the look and feel of a HTML5 datalist, then this is for you! I share an easy method using a toolkit and a more complex one.<\/p>\n\n\n\n<!--more-- class=\" \">\n<!--noteaser-->\n\n\n\n<p>If you ever tried to change the look and feel of a HTML5 datalist but couldn\u2019t, then this post might be your (delayed) Christmas present \ud83c\udf84\ud83c\udf81 (I hope you had a great one and close to the ones you love the most)!<\/p>\n\n\n\n<aside class=\"       wp-block-group sidebar has-main-text-color-color has-aside-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<section class=\"    wp-block-group has-main-text-color-color has-main-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"   has-main-text-color-color has-text-color wp-block-heading\"><strong>Did you know?<\/strong><\/h3>\n\n\n\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"538\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-1024x538.png\" alt=\"Mr.Utils Opengraph Image\" class=\"wp-image-1029\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-768x403.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/figure>\n\n\n\n<p class=\"  has-main-text-color-color has-text-color\"><strong><a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" data-type=\"post\" data-id=\"473\">Mr.Utils<\/a><\/strong> gives you a set of classes with a clear syntax, such as <em><strong>mr-phone-hide<\/strong><\/em> clearly saying to hide an element on a phone, <strong><em>mr-marginright<\/em><\/strong> to add a margin on the right side of an element and <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Utility-Classes\" data-type=\"URL\" data-id=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Utility-Classes\" target=\"_blank\">so much more<\/a><\/strong>&#8230;<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=mrutils\"><strong>Get it now (free)<\/strong><\/a><\/div>\n<\/div>\n<\/div><\/section>\n<\/div><\/aside>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><ul class=\"toc_list\"><li><a href=\"#whats_the_problem_of_styling_a_html5_datalist\"><span class=\"toc_number toc_depth_1\">1<\/span> What\u2019s the problem of styling a HTML5 datalist?<\/a><\/li><li><a href=\"#the_easiest_way_to_style_a_datalist\"><span class=\"toc_number toc_depth_1\">2<\/span> The easiest way to style a datalist<\/a><\/li><li><a href=\"#style_a_datalist_with_code\"><span class=\"toc_number toc_depth_1\">3<\/span> Style a datalist with code<\/a><ul><li><a href=\"#1-_transform_the_datalist_into_an_element_that_can_be_styled\"><span class=\"toc_number toc_depth_2\">3.1<\/span> 1- Transform the datalist into an element that can be styled.<\/a><\/li><li><a href=\"#2-_make_the_input_find_content_on_the_element\"><span class=\"toc_number toc_depth_2\">3.2<\/span> 2- Make the input find content on the element.<\/a><\/li><li><a href=\"#3-_take_it_to_the_next_level_optional_and_advanced\"><span class=\"toc_number toc_depth_2\">3.3<\/span> 3- Take it to the next level (Optional and Advanced)<\/a><\/li><li><a href=\"#gist_full_code_on_how_to_style_a_datalist\"><span class=\"toc_number toc_depth_2\">3.4<\/span> Gist full code on how to style a datalist<\/a><\/li><\/ul><\/li><li><a href=\"#working_example_of_styling_datalists\"><span class=\"toc_number toc_depth_1\">4<\/span> Working example of styling datalists<\/a><\/li><li><a href=\"#comments\"><span class=\"toc_number toc_depth_1\">5<\/span> Comments<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\"><span id=\"whats_the_problem_of_styling_a_html5_datalist\"><strong>What\u2019s the problem of styling a HTML5 datalist?<\/strong><\/span><\/h2>\n\n\n\n<p>At the moment of writing, it\u2019s not possible to style a datalist directly.<\/p>\n\n\n\n<p>Hopefully in the future, we will be able to simply use normal CSS like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.mr-datalist &gt; * {\n    background-color: var(--dark);\n    color: var(--light);\n}<\/code><\/pre>\n\n\n\n<p>For now, if you still want to use datalist, there are two ways to do it:<\/p>\n\n\n\n<ul>\n<li><a href=\"#the_easiest_way_to_style_a_datalist\" data-type=\"internal\" data-id=\"#the_easiest_way_to_style_a_datalist\">An easy way, using a class from a front-end toolkit.<\/a><\/li>\n\n\n\n<li><a href=\"#style_a_datalist_with_code\">A more manual way, using Vanilla JavaScript.<\/a><\/li>\n<\/ul>\n\n\n\n<p>The CSS code above will work after implementing any of those 2 options.<\/p>\n\n\n\n<p>Some things that might be important to you:&nbsp;<\/p>\n\n\n\n<ul>\n<li>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.<\/li>\n\n\n\n<li>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.<\/li>\n<\/ul>\n\n\n\n<p>With that aside, let\u2019s move on with this tutorial\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"the_easiest_way_to_style_a_datalist\"><strong>The easiest way to style a datalist<\/strong><\/span><\/h2>\n\n\n\n<p>You can use a front-end toolkit such as <strong><a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" target=\"_blank\" data-type=\"post\" data-id=\"473\" rel=\"noreferrer noopener\">Mr.Utils<\/a><\/strong>.<\/p>\n\n\n\n<p>All you have to do is, make sure you are adding the global JavaScript file <em>js\/utils.js<\/em> in your page (or if you don\u2019t want to load the entire toolkit, you can individually add <em>dev\/js\/utils\/utils_components.js<\/em>).<\/p>\n\n\n\n<p>After that, you need to add the correct class <strong>.mr-datalist<\/strong> to your datalist <em>(not to the input)<\/em> and it will magically transform it into a \u201csearch\u201d component.<\/p>\n\n\n\n<p>You can then style it with a <a href=\"#whats_the_problem_of_styling_a_html5_datalist\">CSS code similar to the one shown before<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"style_a_datalist_with_code\"><strong>Style a datalist with code<\/strong><\/span><\/h2>\n\n\n\n<p>I mentioned that the easiest way of implementation works like magic, but of course there\u2019s no magic behind it at all, just the correct JavaScript code.<\/p>\n\n\n\n<p>In this post, I\u2019ll share a simplified version of that code with you.<\/p>\n\n\n\n<p>You can either follow the steps or <strong><a href=\"#gist_full_code_on_how_to_style_a_datalist\">jump directly to the Gist full code<\/a><\/strong>.<\/p>\n\n\n\n<p>Feel free to change it to your specific needs.<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"1-_transform_the_datalist_into_an_element_that_can_be_styled\"><strong>1- Transform the datalist into an element that can be styled.<\/strong><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener(\"DOMContentLoaded\", function () {\n  const mrDataLists = document.querySelectorAll(\".mr-datalist\");\n  for (let id = 0; id &lt; mrDataLists.length; id++) {\n    let mrDataList = mrDataLists&#91;id];\n    let mrDataListUL = \"\";\n    let mrDataListClone = \"\";\n \n    mrDataListClone =\n      mrDataList\n        .cloneNode(true)\n        .innerHTML.replaceAll(\"&lt;option\", \"&lt;li\")\n        .replaceAll(\"&lt;\/option&gt;\", \"&lt;\/li&gt;\");\n    mrDataListUL = document.createElement(\"ul\");\n    mrDataListUL.id = mrDataList.id;\n    mrDataListUL.className = mrDataList.className;\n    mrDataListUL.innerHTML = mrDataListClone;\n \n    mrDataList.replaceWith(mrDataListUL);\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>In this first step, we grab all data lists that have the class <em>.mr-datalist, <\/em>but you can change it to your own.<\/p>\n\n\n\n<p>You can even grab all data lists without exception, by replacing the class <em>.mr-datalist<\/em> with the property <em>datalist, <\/em>on the <em>querySelectorAll <\/em>(Don\u2019t forget to change the CSS code accordingly at the end).<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>The <em>replaceWith <\/em>at the end finishes the transformation, but we are not done yet.<\/p>\n\n\n\n<p>We need to create a similar \u201csearch\u201d functionality to the one the HTML5 datalist has.<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"2-_make_the_input_find_content_on_the_element\"><strong>2- Make the input find content on the element.<\/strong><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener(\"keyup\", function (e) {\n  let mrDataListID = \"mr-datalist\";\n  if (e.target.matches('input&#91;list=\"'+mrDataListID+'\"]')) {\n    mrSearch(document.getElementById(mrDataListID), e.target);\n  }\n  e.stopPropagation();\n});\n<\/code><\/pre>\n\n\n\n<p>In here, I\u2019m assuming we know the ID of the datalist, and that we have it on the input \u201clist\u201d attribute. I\u2019m assuming that because those are needed for the original datalist to work.<br>In this example, the ID is <em>mr-datalist,<\/em> set on the mrDataListID variable.<\/p>\n\n\n\n<p>If for some reason you don\u2019t know the ID, there are alternative ways to do it. On Mr.Utils for example, the \u201cSearch\u201d component removes the original input, creates a new one and uses <em>nextElementSibling<\/em>. It does that for a reason, you can check that on the <a href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/blob\/master\/dev\/js\/utils\/utils_components.js\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">GitHub repository<\/a>.<\/p>\n\n\n\n<p>As you might notice, we are calling the function <em>mrSearch<\/em>, which will do the heavy work.&nbsp;<\/p>\n\n\n\n<p>Here is the function simplified, feel free to rename it to anything you want:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function mrSearch(t, e) {\n  \/\/t = Datalist\n  \/\/e = Input with list attribute\n  let mrSearchChildren = t.children;\n  if (mrSearchChildren) {\n    if (e.value !== \"\") {\n      t.style.removeProperty(\"display\");\n      for (let id = 0; id &lt; mrSearchChildren.length; id++) {\n        let mrSearchChild = mrSearchChildren&#91;id];\n        if (mrSearchChild.hasAttribute(\"value\")) {\n          \/\/If the child does not contain any text, show the value as text.\n          if (!mrSearchChild.innerText) {\n            mrSearchChild.innerText = mrSearchChild.getAttribute(\"value\");\n          }\n \n          \/\/Change the input value when clicking on the child.\n          mrSearchChild.addEventListener(\"click\", function () {\n            e.value = mrSearchChild.getAttribute(\"value\");\n          });\n        }\n        mrSearchChild.style.display = \"none\";\n \n        \/\/Checking the child outerHTML because I want to search text also inside the value attribute. Convert in lowercase to not be case sensitive.\n        if (\n          mrSearchChild.outerHTML\n            .toLowerCase()\n            .replace(\/&#91;^a-zA-Z0-9 ]\/g, \"\")\n            .includes(e.value.toLowerCase().replace(\/&#91;^a-zA-Z0-9 ]\/g, \"\"))\n        ) {\n          mrSearchChild.style.removeProperty(\"display\");\n        }\n      }\n    } else {\n      t.style.display = \"none\";\n    }\n  }\n}\n\n<\/code><\/pre>\n\n\n\n<p>Here we changed the Input value when clicking on the element child <em>(the datalist option that we transformed)<\/em> and we\u2019ll make the search case-insensitive.<\/p>\n\n\n\n<p>Check the comments inside the code to better understand which parts replicate which datalist \u201csearch\u201d feature.<\/p>\n\n\n\n<p>Extra: If you have full control over the original datalist, you probably added a value and text to each option. If you don\u2019t have, then this code as you covered, it copies the value into the text when no text is found.<\/p>\n\n\n\n<p><strong>And that\u2019s it! <\/strong>Now you replicated most datalists\u2019 functionalities and can start styling the element, with a <a href=\"#whats_the_problem_of_styling_a_html5_datalist\">CSS code similar to the one shown before<\/a>.<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"3-_take_it_to_the_next_level_optional_and_advanced\"><strong>3- Take it to the next level (Optional and Advanced)<\/strong><\/span><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<ul>\n<li>Show a message when no result is found.<\/li>\n\n\n\n<li>Bold the text while it is found on the results.<\/li>\n\n\n\n<li>If no exact match is found, search by each keyword instead <em>(You can also show a message in that situation)<\/em>.<\/li>\n\n\n\n<li>Show results only after a minimum number of characters <em>(This is a good idea to avoid connection words and code properties)<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>I did many of those features for <strong>Mr.Utils<\/strong>, <strong><a href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/blob\/master\/dev\/js\/utils\/utils_components.js#L356\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">you can check the part of the code here<\/a><\/strong>.<\/p>\n\n\n\n<p>Might also be a good idea, to track pressing keyboard arrow keys, to select the results and improve accessibility.<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"gist_full_code_on_how_to_style_a_datalist\"><strong>Gist full code on how to style a datalist<\/strong><\/span><\/h3>\n\n\n\n<script src=\"https:\/\/gist.github.com\/marcosrego-web\/943e82bbd6243e8f38af4ff5ce081dc6.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"working_example_of_styling_datalists\"><strong>Working example of styling datalists<\/strong><\/span><\/h2>\n\n\n\n<p>I did something very similar to the methods explained above for <strong><a href=\"https:\/\/www.rydoo.com\/compliance\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.rydoo.com\/compliance\/\" rel=\"noreferrer noopener nofollow\">Rydoo\u2019s Compliance Centre<\/a><\/strong> and <strong><a href=\"https:\/\/www.rydoo.com\/marketplace\/\" data-type=\"URL\" data-id=\"https:\/\/www.rydoo.com\/marketplace\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Marketplace<\/a><\/strong>.<\/p>\n\n\n\n<figure class=\"  wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex\">\n<figure class=\"     wp-block-image size-large\"><a href=\"https:\/\/www.rydoo.com\/compliance\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"522\" data-id=\"2727\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Compliance_Centre-1024x522.png\" alt=\"Rydoo-Compliance_Centre\" class=\"wp-image-2727\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Compliance_Centre-1024x522.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Compliance_Centre-300x153.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Compliance_Centre-768x391.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Compliance_Centre-1536x783.png 1536w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Compliance_Centre.png 1902w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption class=\"wp-element-caption\">Rydoo&#8217;s Compliance Centre<\/figcaption><\/figure>\n\n\n\n<figure class=\"     wp-block-image size-large\"><a href=\"https:\/\/www.rydoo.com\/marketplace\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"522\" data-id=\"2724\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Marketplace-1024x522.png\" alt=\"Rydoo-Marketplace\" class=\"wp-image-2724\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Marketplace-1024x522.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Marketplace-300x153.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Marketplace-768x391.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Marketplace-1536x783.png 1536w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/Rydoo-Marketplace.png 1902w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption class=\"wp-element-caption\">Rydoo&#8217;s Marketplace<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>I hope you enjoyed this post! I&#8217;m not sure that I will be writing something more on the blog before entering the new year, so enjoy the celebrations and <strong>let&#8217;s enter 2023 with the right footer!!<\/strong> \ud83e\udd42\ud83c\udf86\ud83e\udd73<\/p>\n\n\n\n<h2><span id=\"comments\"><b>Comments<\/b><\/span><\/h2>\n<div id=\"disqus_thread\"><\/div>\n<script>\nif(mrGetCookie('cookielawinfo-checkbox-functional') == 'yes') {\n    var disqus_config = function () {\n        this.page.url = (location.protocol+'\/\/'+location.host+location.pathname).replace(\"\/account\/\", \"\/\");\n        this.page.identifier = document.querySelector(\"article\").id.replace(\"post-\", \"\");\n    };\n    \n    (function() {\n    var d = document, s = d.createElement('script');\n    s.src = 'https:\/\/marcosrego-web.disqus.com\/embed.js';\n    s.setAttribute('data-timestamp', +new Date());\n    (d.head || d.body).appendChild(s);\n    })();\n} else {\n    document.querySelector('#disqus_thread').innerHTML = 'You cannot view or add comments because you did not consent to the use of functional cookies: <a class=\"  cli_manage_current_consent\" style=\"cursor:pointer;\">Manage your consent.<\/a>';\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>If you can&#8217;t change the look and feel of a HTML5 datalist, then this is for you! I share an easy method using a toolkit and a more complex one.<\/p>\n","protected":false},"author":1,"featured_media":2888,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[32,71,30,35,64,65],"_links":{"self":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2875"}],"collection":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/comments?post=2875"}],"version-history":[{"count":20,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2875\/revisions"}],"predecessor-version":[{"id":2902,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2875\/revisions\/2902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media\/2888"}],"wp:attachment":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media?parent=2875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/categories?post=2875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/tags?post=2875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}