使用 CSS 自定义选项创建自定义选择输入答案

【问题标题】：create custom Select input with Custom Options with css使用 CSS 自定义选项创建自定义选择输入
【发布时间】：2021-10-10 16:00:58
【问题描述】：

我有一个项目。我想创建一个带有像这张图片这样的选项的选择输入，我更喜欢用 html 和 css 编写所有代码，如果需要使用 vanilla js。但无论我多么努力，我都没有成功。我特别坚持选项部分的风格。我在谷歌搜索但找不到我想要的结果。

这是我的代码

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #eee;
    direction: rtl;
}
/* Reset Select */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    border: 1px solid darkgray;
    background: #eee;
    background-image: none;
}
/* Remove IE arrow */
select::-ms-expand {
    display: none;
}
/* Custom Select */
.select {
    position: relative;
    display: flex;
    width: 170px;
    height: 46px;
    line-height: 3;
    overflow: hidden;
    border-radius: 10px;
}
select {
    flex: 1;
    padding: 0 .5em;
    color: #333;
    cursor: pointer;
    position: relative;
}
/* Transition */

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Document</title>
</head>
<body>
<div class="select">
    <select name="select" id="select">
        <option selected disabled>Choose an option</option>
        <option value="1">Pure CSS</option>
        <option value="2">No JS</option>
        <option value="3">Nice!</option>
    </select>
</div>
</body>
</html>

如果有人可以帮助我，我非常感谢。我真的很需要它。

【问题讨论】：

在某种程度上为原生 <select/> 设置样式是可能的——在原生选择上设置下拉列表的样式是完全不同的情况。是否可以避免使用原生 <select/> 元素，而是使用 <div/>s、JavaScript 和 ARIA 创建一个？
这意味着不可能用select和options创建这种风格？ @AlexanderNied
我不确定您在应用哪些样式时遇到问题。我将您的问题解释为如何创建这些元素以避免 js。
我对 vanilla js 没有任何问题。对我来说很重要的一点是，这个元素是用 select 和 options 创建的。我只是为了简单起见才使用 css，但如果你可以用 js 创建这种样式，我很感激你@AsyncAwaitFetch

标签： javascript html jquery css input

【解决方案1】：

我不喜欢边框上的滚动条，它很容易修复，但它与您的图片相同。您需要找到与图片匹配的字体，并且标签上的向下/向上内容可能需要一个新图标 svg。希望这对您来说是一个很好的起点。

const $ = str => [...document.querySelectorAll(str)];

$(".label").forEach(label => {
  label.addEventListener("click", e => {
    const targetLabel = e.target;
    const targetDropdown = targetLabel.parentElement;
    const targetItemContainer = targetDropdown.querySelector(".itemContainer");
    targetItemContainer.classList.toggle("hidden");
    targetLabel.classList.toggle("up");
  });
});

$(".item").forEach(item => {
  item.addEventListener("click", e => {
    const targetItem = e.target;
    const targetItemContainer = targetItem.parentElement;
    const targetDropdown = targetItemContainer.parentElement;
    const targetLabel = targetDropdown.querySelector(".label");
    targetLabel.innerText = targetItem.innerText;
    targetItemContainer.classList.add("hidden");
    targetLabel.classList.remove("up");
  });
});

.dropdown {
  direction: rtl;
  display: inline-block;
}

  .dropdown ::-webkit-scrollbar {
    width: 10px;
  }

  .dropdown ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }

  .dropdown ::-webkit-scrollbar-thumb {
    background: #888; 
  }

  .dropdown ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

.label {
  padding: 1em;
  border: 1px solid black;
  border-radius: 10px;
  width: 100px;
  user-select: none;
}

.label::before {
  position: absolute;
  left: 1em;
  content: "?";
}

.up::before {
  content: "?";
}

.itemContainer {
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  max-height: 200px;
  overflow: auto;
}

.item {
  padding: 1em;
  border-radius: 5px;
}

.item:hover {
  background-color: rgb(240, 240, 250);
}

.hidden {
  display: none;
}

<div class="dropdown">
  <div class="label">ايبسوم</div>

  <div class="itemContainer hidden">
    <div class="item">يوضع في</div>
    <div class="item">يتم ازالة</div>
    <div class="item">الكلاسيكي</div>
    <div class="item">فرانكوا اراب</div>
    <div class="item">يوضع في</div>
    <div class="item">يتم ازالة</div>
    <div class="item">الكلاسيكي</div>
    <div class="item">فرانكوا اراب</div>
  </div>
</div>

【讨论】：

请注意，此解决方案缺乏对纯键盘或屏幕阅读器用户的可访问性——您需要手动添加，并且需要利用一些 ARIA 来达到此目的。
我对 ARIA 不熟悉，通常为内部使用构建应用程序。如果您有任何资源可以推荐，我很乐意看看。
1) MDN Page for ARIA 2) WAI-ARIA Dropdown Example Implementation 3) 我写的一篇文章：An Unreasonably Long Introduction To ARIA (With Example Implementation)
另外，对于它的价值，请注意 - 您可能正在构建供内部使用的应用程序，但许多缺陷是隐藏的，您可能不知道人们会受到它们的影响。即使对于内部应用程序，努力使事物最大程度地易于访问也可能是明智的；您当然不希望雇用需要使用辅助网络浏览技术的人，因为您没有让您的工作场所充分无障碍......
将很高兴了解有关可访问性的更多信息，感谢您提供的资源。