10 个免费的 CSS 和 JavaScript 选择框片段

默认的 HTML 选择框已经为我们服务了几十年。 但在现代，公平地说它们有点……陈旧。

设计师可以做得更好，并且由于 CSS 的进步，自定义选择框很容易。 更不用说所有在线免费提供的开源代码了。

我为手工制作的选择框样式精选了我的前 10 名精选集。 这些不是作为插件发布的，而是依赖于 JavaScript 和 CSS 自定义的模板。 但是它们都一样容易设置，甚至可以根据自己的目的重新设计。

1.自定义选择菜单

该系列的开始是 Wallace Erick 的自定义选择菜单样式。

它使用 CSS 重新设置样式，使用 JavaScript 配置菜单的 UX。 它们的行为与标准的 HTML 选择略有不同，我认为它们更好用。

您可以选择菜单的大小和颜色样式或使用华莱士的默认设置。 最重要的是，他包括一个自定义上传字段设计，如果您曾经尝试过重新设计，您就会知道这很困难。

如果您只想要一个干净而新鲜的精选菜单，这是一个很好的起点。

2.简单选择

这是另一个非常简单的选择框，旨在更自然地融入每个布局。

这依赖于更微妙的颜色和简单的黑白配色方案。 但它也使用 JavaScript 使选择菜单进入和退出视图。

它通过定位一个隐藏的输入字段来工作，该字段的行为就像选择字段一样。 这样，您仍然可以将数据从前端提取到表单中，因为该解决方案在技术上不使用实际的<select>元素。

如果兼容性是一个问题，那么跳过这个。 但我不得不承认这个设计很漂亮，非常适合桌面流量。

3. 非 Sucky HTML 下拉菜单

顾名思义，这组精选菜单旨在不吸吮。 它们都有不同的样式和尺寸，您可以单击按钮来按需更改颜色。

显然，您可以在自己的布局中删除该功能，并坚持使用适合您网站的方案。 但总的来说，这些选择菜单就像普通菜单一样工作，而且使用起来非常漂亮。

如果您确实担心兼容性，请考虑使用此模板。

大多数更改都是装饰性的，因此不会对用户行为产生太大影响。

4.占位符选择

这个占位符选择菜单的实际设计非常漂亮，但设计并不是这里唯一的因素。

开发人员 James Nowland 创建此菜单的目的是从选择选项中删除默认设置。 这意味着它的行为更像是文本字段中的占位符，当字段为空白时您会看到它，但是一旦您设置了一个值，它就会消失。

它完全兼容并适用于实际的 HTML 选择元素。 每当用户选择一个选项时，选项字段默认是隐藏的。 这样，您永远不会在下拉菜单中的任何位置看到“选择一个选项”文本。 真正有创意的解决方案！

5.平面设计

美学在网页设计中通常很重要，这个平面选择菜单就是一个很好的例子。

它仍然像典型的选择一样工作，下拉部分根本没有改变。 但只是选择本身的重新设计确实使页面活跃起来。 它感觉比丑陋的浏览器默认设置要优雅得多。

您甚至可以使用此模板并在下拉区域中使用您自己的平面样式对其进行扩展。 完全由您来电！

但作为起始模板，这是任何界面最简单的选择之一。

6.纯CSS

我是纯 CSS over JavaScript 的忠实粉丝，因为它简化了整个设计过程。 这并不容易，但有很多解决方案。

我最喜欢的片段之一是这个片段不仅包含纯 CSS 选择菜单，还包含单选框和复选框。

所有这些看起来都很棒，应该融入任何类型的布局。 您可以完全控制在 CSS 中进行编辑，并且所有这些都应该适用于所有主流浏览器。

7. 样式化的可访问下拉菜单

这是您可以使用选择菜单执行哪些操作的更程式化的示例之一。 这个由 Andy Fitzsimon 创建的片段依赖于 JavaScript 来实现下拉效果，并使用自定义 CSS 来制作渐变和箭头图标。

好在这个菜单还支持 no-JS 功能，所以即使 JavaScript 被禁用它也能工作。 它被称为优雅降级，它是 Web 开发人员在可访问性方面最好的朋友。

这些选择菜单仍然运行老式的 web 2.0 渐变，这可能不适合 2017 年及以后的设计。

但这表明您可以在任何地方使用选择菜单，只需一点创意。 如果您通过 CSS 破解您的方式来对它们进行一些自定义，这些效果会出奇的好。

8. SVG图标菜单

默认选择菜单的侧面有箭头图标，仅此而已。 使用一点 SVG 魔法，您可以将其转换为您喜欢的任何其他图标。

这个自定义菜单有自己的加号图标设计，运行纯 SVG 文件。 当您单击展开菜单时，它会动画成一个 X 图标用于关闭/隐藏。

我以前从未见过像这样的东西，它显示了我们已经将网络浏览器的极限推到了多远。

不幸的是，这不会在原生 HTML 选择元素上运行。 它是div内的列表项的集合，因此无论何时选择一个值，它都需要定位一个隐藏的输入字段。

值得庆幸的是，该过程非常简单，因此如果您希望在您的网站上进行此设计，则不需要太多工作即可完成。

9.选择盒子实验

这是一个真正引起我注意的实验设计。 比较演示屏幕显示了这与常规选择菜单有何不同以及它如何改变用户体验。

当您第一次点击/单击打开菜单时，它会以完整的动画效果向下滑动。 但除非您再次单击菜单，否则它不会隐藏，这与单击页面上其他任何位置时隐藏的典型选择菜单不同。

一个非常好的干净设计和简单动画的例子。 但是，如果您不喜欢缺少的点击隐藏功能，这可能会破坏交易。

10. 深色和浅色选择

如果您也喜欢纯 CSS 并且想要时尚的选择，那么请查看此解决方案并尝试使用其中一个作为起始模板。

它们都依赖 CSS 渐变作为背景，并将下拉菜单混合到渐变的较低颜色中。 这不使用任何 JavaScript 插件，因此您只需一点 CSS 和一些创造性的工作即可完成此操作。

请注意，CSS 本身非常复杂，因此如果您熟悉该语言，它会有所帮助。 但作为一个起点，这是您会发现的最佳选择之一，它也为定制留下了很大的空间。