Custom Dropdown using HTML CSS & JavaScript

Create a custom dropdown menu using HTML CSS and JavaScript. In this javascript project you will learn how to create a custom dropdown by creating unordered list using HTML style it using CSS and add functionality using JavaScript

Project Content

Create html css and javascript files in Visual Studio code
Create html5 boilerplate
Add Font awesome to html
Create the main containern class
Create a HTML input tag as the selector
Create a html ul for the options
use font awesome icons in html
Create style.css file
CSS general reset and setup
Create CSS Variables
Use google fonts in html
Styling the general container class using CSS
Style the options container using CSS
Styling the Arrow Icon using CSS
Styling the dropdown options container using CSS
Create dropdown on using JavaScript
Using on focus event listener in javascript
Using onblur event listener in javascript
Using forEach loop

HTML

As always you will start out by creating a HTML5 boilerplate and font Awesome to the head for icons. For font awesome use the provided CDN

Before you start your project I always suggest to wrap the project into a div with a class of container use it for furder styling with CSS

<div class="container">
      <h1>Custom dropdown</h1>
      <div class="select-box">
        <div class="input-container">
          <input
            type="text"
            class="selected"
            placeholder="Select a programing language"
          />
          <i class="fa-solid fa-arrow-down" id="arrow"></i>
        </div>
        <ul class="options-container">
          <li class="option"><i class="fa-brands fa-html5"></i> HTML</li>
          <li class="option"><i class="fa-brands fa-css3-alt"></i> CSS</li>
          <li class="option"><i class="fa-brands fa-js"></i> JavaScript</li>
          <li class="option"><i class="fa-brands fa-sass"></i> Sass/Scss</li>
          <li class="option">
            <i class="fa-solid fa-file-code"></i> TypeScript
          </li>
          <li class="option"><i class="fa-brands fa-node-js"></i> NodeJS</li>
          <li class="option"><i class="fa-brands fa-python"></i> Python</li>
          <li class="option"><i class="fa-solid fa-database"></i> SQL</li>
          <li class="option"><i class="fa-brands fa-rust"></i> Rust</li>
        </ul>
      </div>
    </div>

CSS

Start your CSS with a general reset of margins and padding. Next add CSS Variables for ease flexability and a preferred font from Google fonts . I personally went with the Poppins font, it just fits the project.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
}
:root {
  --bg: #f6f6ff;
  --light: #c6cdc0;
  --mid: #016960;
  --dark: #293a4e;
  --boxShadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
}
@import url("https://fonts.googleapis.com/css2?family=Grape+Nuts&family=Poppins:wght@100;200;300;400;500;600;700;900&display=swap");
body {
  background: var(--bg);
  font-family: "Grape Nuts", cursive;
  /* font-family: "Poppins", sans-serif; */
}

.container {
  margin-top: 100px;
  padding: 3rem;
}
h1 {
  margin: 1rem;
  margin-left: 0;
  color: var(-dark);
}
.select-box {
  display: flex;
  flex-direction: column;
  width: 400px;
}
.selected {
  position: relative;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--mid);
  margin-bottom: 10px;
  color: #f6f6ff;
  box-shadow: var(--boxShadow);
  padding: 12px 24px;
}
.selected::placeholder {
  color: var(--mid);
  font-weight: 600;
}

.input-container {
  position: relative;
}
#arrow {
  color: var(--dark);
  position: absolute;
  right: 12px;
  top: 12px;
}
.fa-arrow-up {
  color: var(--bg) !important;
}

.options-container {
  background: var(--dark);
  color: var(--bg);
  width: 100%;
  transition: all 0.5s;
  border-radius: 8px;
  overflow: hidden;

  opacity: 0;
  max-height: 0;
}
.options-container.active {
  max-height: 240px;
  border: 1px solid var(--dark);
  box-shadow: var(--boxShadow);
  opacity: 1;
  overflow-y: scroll;
}
.options-container::-webkit-scrollbar {
  width: 8px;
  background: var(--light);
  border-radius: 0 8px 8px 0;
}
.options-container::-webkit-scrollbar-thumb {
  background: var(--mid);
  border-radius: 0 8px 8px 0;
}
.option {
  padding: 12px 24px;
  cursor: pointer;
}
.option:hover {
  background: var(--bg);
  color: var(--dark);
}

JavaScript

Create your javascript file, name it script.js or main.js. Now start getting your elements from the DOM.

Next use Javascripts onfocus event listener and onblur event listener to add styling and add or remove css classes from the selected element.

// Get DOM Elements

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const optionsList = document.querySelectorAll(".option");
const arrow = document.querySelector("#arrow");

// console.log(selected, optionsContainer, optionsList, arrow);

selected.onfocus = () => {
  //   console.log("focus");
  selected.style.backgroundColor = "var(--dark)";
  optionsContainer.classList.toggle("active");
  if (arrow.classList.contains("fa-arrow-down")) {
    arrow.classList.remove("fa-arrow-down");
    arrow.classList.add("fa-arrow-up");
  }
};

selected.onblur = () => {
  //   console.log("blur");
  selected.style.backgroundColor = "initial";
  optionsContainer.classList.toggle("active");
  if (arrow.classList.contains("fa-arrow-up")) {
    arrow.classList.remove("fa-arrow-up");
    arrow.classList.add("fa-arrow-down");
  }
};

// Select element form dropdown list and display selected element

optionsList.forEach(
  (item) =>
    (item.onclick = () => {
      console.log(item.innerText);
      selected.placeholder = item.innerText;
      document.querySelector("h1").innerHTML = item.innerHTML;
    })
);