如何使用 HTML 构建自定义表单控件？

在某些情况下，您希望对某些控件执行高级样式设置，并且觉得可用的原生 HTML 表单控件还不够。在所有这些情况下，您都必须构建自己的控件。

在本文中，我们将学习创建自定义控件。让我们看看重构元素。最好从现有控件开始，因为它的状态和行为是众所周知的。如果你想创建一个全新的标准化控件，那么这不是一件容易的事，因为当涉及到像这样的标准化元素时，作者花费了大量的时间来描述每个使用场景和每个输入设备的所有交互。因此，设计一个全新的控件通常是为非常重要的行业参与者保留的。

HTML：它定义了 表单控件的结构。代码的脚本部分也包含在最后，它为海关控制提供了生命。该脚本使用文档查询 selector() 方法并为用户选择的输入单击事件侦听器。 JavaScript toggle() 方法用于将所选项目标记为“活动”或移除“活动”状态。

HTML

    Building custom control
    
     
   
      


    GeeksforGeeks
    Custom form controls
    
     
      
        Lemon
        Cherry
        Apple
        Strawberry
        Banana
        Pineapple
        Mango
        Papaya
        Orange
        Grapes
      
      Select
    
    
       $( 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");
              });
            });
       });
    

style.css：在上面的 HTML 代码中使用了以下代码，用于使用 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;
}

输出：

Copyright © 2020 - 2024 版权所有
蜀ICP备20006366号-1
Made with ❤️ in Chengdu