滥用 Customizable Selects

Web browsers ship new features all the time, but what fun is it if we can’t build silly and fun things with them?

Web 浏览器不断推出新功能，但如果我们不能用它们构建愚蠢而有趣的东西，那还有什么乐趣呢？

In this article, let’s go over a few demos that I’ve made by using the new customizable <select> feature, and walk through the main steps and techniques that I’ve used to implement them.

在本文中，让我们回顾几个我使用 新的可自定义 <select> 功能 制作的演示，并逐步讲解我用于实现它们的主要步骤和技术。

I hope they get you as excited as I am about custom selects, and give you just about enough knowledge to get started creating your own. Yours might be more, you know, useful than mine, and probably for good reasons, but I like going a little bit overboard on silly ideas because that gives me a better chance to learn.

我希望它们让你像我一样对自定义 select 感到兴奋，并给你足够的知识来开始创建你自己的。你的可能更，你知道，有用，比我的更有用，可能有充分理由，但我喜欢在愚蠢的想法上稍微过度，因为这给了我更好的学习机会。

Before we start, a word about browser support: the demos in this article only run on recent Chromium-based browsers because that’s where customizable selects are implemented right now. However, this feature is designed in a way that doesn’t break non-supporting browsers. After all, a customized <select> element is still a <select> element. So, if the browser you’re using doesn’t support customizable selects, you’ll just see normal selects and options in these demos, and that’s great. It’ll just be a lot less fun.

在开始之前，先说一下浏览器支持：本文中的演示仅在最近的基于 Chromium 的浏览器上运行，因为目前 customizable selects 就是在那里实现的。然而，这个特性被设计成不会破坏不支持它的浏览器。毕竟，自定义的 <select> 元素仍然是一个 <select> 元素。所以，如果你使用的浏览器不支持 customizable selects，你在这些演示中只会看到普通的 select 和选项，这很好。只是会少了很多乐趣。

Curved stack of folders

弯曲的文件夹堆

Let’s get started with the first demo: a stack of folders to pick from, with a twist:

让我们开始第一个演示：一叠文件夹供选择，带有一个转折：

We’ll start with some HTML code first. We don’t need a lot of complicated markup here because each option is just the name of the folder. We can draw the folder icons later with CSS only.

我们先从一些 HTML 代码开始。我们这里不需要很多复杂的标记，因为每个选项只是文件夹的名称。我们稍后可以用纯 CSS 绘制文件夹图标。

<select>
  <option value="documents"><span>Documents</span></option>
  <op...