1. Tutorials
  2. Step-by-Step Guide to Creating a Custom Select Field with Images Using HTML, CSS, and JavaScript from Scratch

Step-by-Step Guide to Creating a Custom Select Field with Images Using HTML, CSS, and JavaScript from Scratch

Submitted by oretnom23 on Monday, January 13, 2025 - 17:32.

In this tutorial, we’ll guide you through creating a Custom Select Field from scratch using HTML, CSS, and JavaScript. This step-by-step tutorial is designed to give you a reusable and customizable select dropdown feature that can enhance the user interface of your web application projects. Whether you’re a beginner or looking to refine your skills, this tutorial offers valuable insights for implementing interactive UI elements.

What does this Custom Select Field with Images Do?

The Custom Select Field with Images we’ll build in this tutorial transforms a standard HTML select dropdown into a visually appealing, interactive form component. Each option in this custom select field will include an image alongside its value, creating a more engaging and user-friendly interface. This feature is versatile and can be utilized in various web applications to enhance user experience and deliver a more modern, interactive design.

Let's start the coding part!

Step 1: Compile the Images

To get started, download the images you plan to use for the sample web application. Place these images in a dedicated folder within your application's root directory. For this tutorial, I’ve prepared 5 different color images and saved them in a folder named images. You can organize your assets similarly to maintain a clear and structured project layout.

Step 2: Creating the Interface

Now, let’s create the HTML file for our custom select field application. This file will define the essential elements for the frontend interface, including the application title and the default HTML select field. These elements will serve as the foundation for building and styling the custom dropdown functionality. Refer to the script below for a clearer understanding:

idex.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Select Field with Images using HTML, CSS, and JavaScript </title>
  7.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  11.     <div id="main-wrapper">
  12.         <div id="app-title">Select Field with Images using HTML, CSS, and JavaScript</div>
  13.        
  14.         <div class="card">
  15.             <div class="custom-select-field">
  16.                 <label for="colors" class="custom-select-label">Select Colors</label>
  17.                 <select name="colors" id="colors" class="custom-select-dd">
  18.                     <option value="1" data-img="./images/5D8736.jpg">#5D8736</option>
  19.                     <option value="2" data-img="./images/155E95.jpg">#155E95</option>
  20.                     <option value="3" data-img="./images/16404D.jpg">#16404D</option>
  21.                     <option value="4" data-img="./images/F14A00.jpg">#F14A00</option>
  22.                     <option value="5" data-img="./images/FF748B.jpg">#FF748B</option>
  23.                 </select>
  24.             </div>
  25.         </div>
  26.    
  27.     </div>
  28.     <script src="script.js"></script>
  29. </body>
  30. </html>

Step 3: Styling the Interface

Next, let’s create the Cascading Style Sheets (CSS) file. This file will define the design, structure, and layout of the application's interface. It also includes styling for the elements dynamically generated by the JavaScript functionality. Refer to the CSS script below to see how these styles bring the custom select field to life.

style.css

  1. @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
  2.  
  3. * {
  4.     font-family: "Ubuntu", serif;
  5.     font-weight: 400;
  6.     font-style: normal;
  7.     box-sizing: border-box;
  8. }
  9.  
  10. html, body {
  11.     margin: unset;
  12.     padding: unset;
  13.     height: 100%;
  14.     min-height: 100%;
  15.     width: 100%;
  16.     min-width: 100%;
  17.     overflow: auto;
  18. }
  19.  
  20. body {
  21.     display: flex;
  22.     flex-flow: column wrap;
  23.     justify-content: center;
  24.     align-items: center;
  25.     background-color: #4290fb;
  26.     background-image: linear-gradient(242deg, rgba(131, 204, 255, 1) 0.4%, rgba(66, 144, 251, 1) 100.3%);
  27.     color: #fff;
  28.     margin-bottom: 25px;
  29. }
  30.  
  31. #main-wrapper{
  32.     width: 100%;
  33.     max-width: 600px;
  34.     padding: 20px 30px;
  35.     flex-basis: content;
  36. }
  37.  
  38. #app-title{
  39.     width: 100%;
  40.     font-size: 25px;
  41.     font-weight: 700;
  42.     letter-spacing: 1px;
  43.     margin-bottom: 25px;
  44.     text-shadow: 3px 3px 7px #00000094;
  45.     text-align: center;
  46. }
  47.  
  48. .card{
  49.     width: 100%;
  50.     padding: 15px 20px;
  51.     border-radius: 5px;
  52.     box-shadow: 3px 5px 7px #00000094;
  53.     background-color: #fff;
  54.     color: #1b1b1b;
  55. }
  56.  
  57.  
  58. /*
  59. Custom Select Field Styles
  60. */
  61.  
  62. .custom-select-field {
  63.         position: relative;
  64.         width: 100%;
  65.         margin-bottom: 5px;
  66.     }
  67.    
  68.     .custom-select-field label.custom-select-label {
  69.         display: block;
  70.         width: 100%;
  71.         color: #404040;
  72.         font-size: 15px;
  73.         font-weight: 500;
  74.         letter-spacing: 1px;
  75.         margin-bottom: 10px;
  76.         user-select: none;
  77.     }
  78.    
  79.     .custom-select-field select.custom-select-dd {
  80.         display: none;
  81.     }
  82.    
  83.     .custom-select-field div.custom-select-selected,
  84.     .custom-select-field div.custom-select-option
  85.     {
  86.         display: flex;
  87.         width: 100%;
  88.         padding: 5px 15px;
  89.         cursor: pointer;
  90.     }
  91.     .custom-select-field div.custom-select-selected{
  92.         position: relative;
  93.         border: 1px solid #dedede;
  94.         box-shadow: 3px 3px 5px #00000069;
  95.         border-radius: 3px;
  96.         padding: 10px 15px;
  97.         padding-right: 25px;
  98.     }
  99.    
  100.     .custom-select-field div.custom-select-selected::after{
  101.         content: "";
  102.         position: absolute;
  103.         width: 7px;
  104.         height: 7px;
  105.         right: 15px;
  106.         rotate: 45deg;
  107.         border: 2px solid #9e9e9e;
  108.         border-left: unset;
  109.         border-top: unset;
  110.         transition: all .2s ease-in-out;
  111.         translate: 50% 50%;
  112.     }
  113.    
  114.     .custom-select-field.menu-shown div.custom-select-selected::after{
  115.         rotate: 225deg;
  116.     }
  117.    
  118.     .custom-select-field div.custom-select-options
  119.     {
  120.         display: none;
  121.         position: absolute;
  122.         width: calc(100% - 4px);
  123.         border: 1px solid #dedede;
  124.         background: #fff;
  125.         transform: translate(2px, -4px);
  126.         box-shadow: 3px 3px 5px #00000052;
  127.         border-bottom-left-radius: 5px;
  128.         border-bottom-right-radius: 5px;
  129.     }
  130.     .custom-select-field.menu-shown div.custom-select-options{
  131.         display: block;
  132.         animation-duration: .1s;
  133.         animation-name: CustomSelectSlideDown;
  134.         max-height: 200px;
  135.         overflow: auto;
  136.     }
  137.     @keyframes CustomSelectSlideDown {
  138.         0%{
  139.             height: 0;
  140.             overflow: hidden;
  141.         }
  142.         100%{
  143.             height: 100%;
  144.             overflow: hidden;
  145.             /* overflow: auto; */
  146.         }
  147.     }
  148.     .custom-select-field div.custom-select-option{
  149.         border-bottom: 1px solid #dedede;
  150.     }
  151.     .custom-select-field div.custom-select-option:hover{
  152.         background: #40b7fc46;
  153.     }
  154.    
  155.     .custom-select-field div.custom-select-option.selected{
  156.         background: #41a0d646;
  157.     }
  158.    
  159.     .custom-select-field div.custom-select-option:nth-last-child(1){
  160.         border-bottom: unset;
  161.     }
  162.    
  163.     .custom-select-field .custom-select-option-img {
  164.         display: flex;
  165.         width: 25px;
  166.         height: 20px;
  167.         overflow: hidden;
  168.         margin-right: 10px;
  169.     }
  170.    
  171.     .custom-select-field .custom-select-option-img img{
  172.         width: 100%;
  173.         height: 100%;
  174.         object-fit: cover;
  175.         object-position: center center;
  176.         user-select: none;
  177.         pointer-events: none;
  178.     }
  179.     .custom-select-field .custom-select-option-text.custom-select-none-selected {
  180.         color: #a8a1a1;
  181.         font-weight: 400;
  182.         font-style: italic;
  183.         letter-spacing: 1px;
  184.     }
  185.     .custom-select-field .custom-select-option-text{
  186.         flex-grow: 1;
  187.         flex-basis: min-content;
  188.         font-size: 15px;
  189.         font-weight: 500;
  190.         color: #4b4b4b;
  191.         user-select: none;
  192.         pointer-events: none;
  193.     }

Step 4: Creating the Main Function

Finally, let's create the JavaScript file for our application. This file contains all the functions and methods that power our Custom Select Field. The script dynamically generates custom select fields for every select element found in the HTML interface.

The JavaScript is written in an Object-Oriented Programming (OOP) style, utilizing class objects and methods for better structure and reusability.

Upon successful page load, the script initializes the Custom Select Field with Images interface. It also includes event listener functions that enhance the functionality of the custom select field, making it more efficient, user-friendly, and interactive for the end-user. Refer to the JS code below for a clearer understanding.

script.js

  1. /**
  2.  * Custom Select Class
  3.  */
  4. class CustomSelectImg {
  5.     constructor() {
  6.  
  7.     }
  8.     init() {
  9.         const $self = this;
  10.         document.querySelectorAll(".custom-select-field").forEach(function (el, idx) {
  11.             var _createdTemplate = $self.createTemplate(el, idx);
  12.             el.append(_createdTemplate);
  13.  
  14.  
  15.             $self.clickEvent(el);
  16.             $self.SelectOption(el);
  17.  
  18.  
  19.             document.addEventListener("click", e => {
  20.                 if (el.classList.contains('menu-shown')) {
  21.                     if (el.querySelectorAll(".custom-select-container").length > 0) {
  22.                         if (!el.querySelector(".custom-select-container").contains(e.target)) {
  23.                             $self.ShowHideMenu(el)
  24.                         }
  25.                     }
  26.                 }
  27.             })
  28.  
  29.             document.addEventListener("keypress", e => {
  30.                 if (el.classList.contains('menu-shown')) {
  31.                     if (el.querySelectorAll(".custom-select-container").length > 0) {
  32.                         if (!el.querySelector(".custom-select-container").contains(e.target)) {
  33.                             $self.ShowHideMenu(el)
  34.                         }
  35.                     }
  36.                 }
  37.             })
  38.  
  39.             el.querySelector("select").addEventListener("change", function (e) {
  40.                 e.preventDefault()
  41.                 var selected = this.value
  42.                 if (selected == "") {
  43.                     el.querySelector(".custom-select-selected").innerHTML = (`
  44.                         <div class="custom-select-option-text custom-select-none-selected">Select Here...</div>
  45.                     `)
  46.                 } else {
  47.                     el.querySelector(`.custom-select-options .custom-select-option[data-value="${selected}"]`).click()
  48.                 }
  49.             })
  50.         })
  51.  
  52.  
  53.     }
  54.  
  55.     /**
  56.      * Create Dropdown template
  57.      */
  58.     createTemplate(el, idx) {
  59.         var select = el.querySelector("select")
  60.         var id = "CustomSelectDD" + (select.getAttribute("id") || select.getAttribute("name") || ("CustomSelect" + idx))
  61.         var options = select.querySelectorAll("option")
  62.         var customSelect = document.createElement('div')
  63.         customSelect.setAttribute("id", id);
  64.         customSelect.setAttribute("class", "custom-select-container");
  65.  
  66.         customSelect.innerHTML = (`
  67.         <div class="custom-select-selected"></div>
  68.         <div class="custom-select-options"></div>
  69.         `);
  70.  
  71.         if (options.length > 0) {
  72.             for (var i = 0; i < options.length; i++) {
  73.                 var optionItem = document.createElement("div")
  74.                 optionItem.setAttribute("class", "custom-select-option")
  75.                 var optEl = options[i]
  76.                 var imgSrc = optEl.dataset.img || "";
  77.  
  78.                 optionItem.dataset.value = optEl.getAttribute("value") || optEl.innerText;
  79.                 optionItem.dataset.imgSrc = imgSrc
  80.                 optionItem.innerHTML = (`
  81.                 <div class="custom-select-option-img"><img src="${imgSrc}" alt="Custom Select Option (${optEl.innerText})"></div>
  82.                 <div class="custom-select-option-text">${optEl.innerText}</div>
  83.                 `)
  84.                 if (select.value == (optEl.getAttribute("value") || optEl.innerText)) {
  85.                     optionItem.classList.add("selected");
  86.                 }
  87.                 customSelect.querySelector(".custom-select-options").append(optionItem)
  88.             }
  89.         }
  90.  
  91.         if (select.querySelectorAll("option[selected]").length > 0) {
  92.             var SelOptEl = select.querySelector("option[selected]")
  93.             var SelImgSrc = SelOptEl.dataset.img || "";
  94.  
  95.             customSelect.querySelector(".custom-select-selected").innerHTML = (`
  96.                 <div class="custom-select-option-img"><img src="${SelImgSrc}" alt="Custom Select Option (${SelOptEl.innerText})"></div>
  97.                 <div class="custom-select-option-text">${SelOptEl.innerText}</div>
  98.             `)
  99.         } else {
  100.             customSelect.querySelector(".custom-select-selected").innerHTML = (`
  101.                 <div class="custom-select-option-text custom-select-none-selected">Select Here...</div>
  102.             `)
  103.         }
  104.  
  105.         return customSelect;
  106.     }
  107.  
  108.     /**
  109.      * Select Field Click Event
  110.      */
  111.     clickEvent(el) {
  112.         const $self = this;
  113.         if (!!el.querySelector("label.custom-select-label")) {
  114.             el.querySelector("label.custom-select-label").addEventListener("click", function () {
  115.                 $self.ShowHideMenu(el)
  116.             })
  117.         }
  118.         if (!!el.querySelector(".custom-select-selected")) {
  119.             el.querySelector(".custom-select-selected").addEventListener("click", function () {
  120.                 $self.ShowHideMenu(el)
  121.             })
  122.         }
  123.     }
  124.  
  125.     /**
  126.      * Show/Hide Menu (options)
  127.      */
  128.     ShowHideMenu(el) {
  129.         const $self = this;
  130.         var shownClass = el.classList.contains('menu-shown')
  131.  
  132.         if (shownClass) {
  133.             el.classList.remove('menu-shown')
  134.         } else {
  135.             el.classList.add('menu-shown')
  136.         }
  137.     }
  138.  
  139.     /**
  140.      * Option Selected Event
  141.      */
  142.     SelectOption(el) {
  143.         const $self = this;
  144.         el.querySelectorAll(".custom-select-option").forEach(function (optionEL) {
  145.             optionEL.addEventListener("click", function (e) {
  146.                 e.preventDefault();
  147.                 var data = optionEL.dataset
  148.                 if (el.querySelectorAll('.custom-select-option.selected').length > 0) {
  149.                     el.querySelector('.custom-select-option.selected').classList.remove("selected");
  150.                 }
  151.                 optionEL.classList.add('selected');
  152.                 el.querySelector(`select`).value = data.value || optionEL.querySelector(".custom-select-option-text") || "";
  153.  
  154.                 el.querySelector(".custom-select-selected").innerHTML = (`
  155.                     <div class="custom-select-option-img"><img src="${data.imgSrc}" alt="Custom Select Option (${optionEL.querySelector(".custom-select-option-text").innerText})"></div>
  156.                     <div class="custom-select-option-text">${optionEL.querySelector(".custom-select-option-text").innerText}</div>
  157.                 `)
  158.                 $self.ShowHideMenu(el)
  159.             })
  160.         })
  161.     }
  162.  
  163. }
  164.  
  165. const __CustomSelect = new CustomSelectImg();
  166.  
  167. window.onload = function () {
  168.     __CustomSelect.init();
  169. }

Snapshots

Here are some screenshots showcasing the results of the source code provided above, as seen on my end.

Page Loaded

Creating a Custom Select Field with Images Using HTML, CSS, and JavaScript

Custom Select's Options Menu Shown

Creating a Custom Select Field with Images Using HTML, CSS, and JavaScript

Custom Select's Option is Selected

Creating a Custom Select Field with Images Using HTML, CSS, and JavaScript

The complete source code zip file is available for free download on this website. Feel free to download and modify it to suit your needs. You can find the download button located below this article.

There you have it! I hope this Step-by-Step Guide on Creating a Custom Select Field with Images Using HTML, CSS, and JavaScript helps you achieve your goals and provides valuable insights for your future web application projects.

Explore more on this website for additional Tutorials, Free Source Code, and Articles covering a wide range of programming languages.

Happy Coding =)

Tags
html/css
JS tutorial
Custom Select box with Images
JS OOP

Add new comment

About text formats
  • 92 views