Open In App

How to build custom form controls using HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

There are cases when you want to perform advanced styling on some controls and feel like available native HTML form controls are not enough. In all such cases, you have to build your own controls.

In this article, we will learn to create a custom control. Let us look at reconstructing the <select> element. It is good to start with an existing control because its states and behaviors are well known. If you want to create a completely new standardized control then it is not an easy task, because when it comes to standardized elements like <select> the authors spent an extraordinary amount of time describing all interactions for every use scenario and every input device. Therefore, designing a completely new control is often reserved for very significant industry players.

HTML: It defines the structure for <select> form control. The script part of the code is also included at the end which gives life to the customs controls. The script uses the document query selector() method and clicks event listener for the input selected by the user. JavaScript toggle() method is used for marking the selected item to be “active” or removing the “active” state.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Building custom control</title>
    <link rel="stylesheet"
          type="text/css"
          href="style.css">
     <script src=
   </script>
      
</head>
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <strong>Custom form controls</strong>
    <br/><br/>
     <div class="select-container">
      <div class="option-container">
        <div class="option">Lemon</div>
        <div class="option">Cherry</div>
        <div class="option">Apple</div>
        <div class="option">Strawberry</div>
        <div class="option">Banana</div>
        <div class="option">Pineapple</div>
        <div class="option">Mango</div>
        <div class="option">Papaya</div>
        <div class="option">Orange</div>
        <div class="option">Grapes</div>
      </div>
      <div class="selected">Select</div>
    </div>
    <script>
       $( document ).ready(function() {
           const selected = document.querySelector(".selected");
           const optionContainer = 
               document.querySelector(".option-container");
  
           const optionList = document.querySelectorAll(".option");
  
            selected.addEventListener("click", () => {
              optionContainer.classList.toggle("active");
            });
  
            optionList.forEach((item) => {
              item.addEventListener("click", () => {
                selected.innerHTML = item.innerHTML;
                optionContainer.classList.remove("active");
              });
            });
       });
    </script>
</body>
</html>


style.css: The following code is used in the above HTML code for the look and feel using CSS.

CSS




body {
  font-family: "Roboto", sans-serif;
}
  
.select-container {
  display: flex;
  flex-direction: column;
  width: 400px;
}
  
.select-container .option-container {
  background: #2f3640;
  color: #f5f6fa;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border-radius: 8px;
  overflow: hidden;
  order: 1;
}
  
.selected {
  background: #2f3640;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #f5f6fa;
  position: relative;
  order: 0;
}
  
.selected::after {
  content: "v";
  position: absolute;
  height: 100%;
  width: 30px;
  right: 10px;
  top: 11px;
  transition: all 0.4s;
}
  
.select-container .option-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
}
  
.select-container .option-container.active + .selected::after {
  transform: rotateX(180deg);
  top: -14px;
}
  
.select-container .option-container::-webkit-scrollbar {
  width: 8px;
  background: #0d141f;
  border-radius: 0 8px 8px 0;
}
  
.select-container .option-container::-webkit-scrollbar-thumb {
  background: #525861;
  border-radius: 0 8px 8px 0;
}
  
.select-container .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}
  
.select-container .option:hover {
  background: #414b57;
}


Output:



Last Updated : 09 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads