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 本身非常複雜，因此如果您熟悉該語言，它會有所幫助。 但作為一個起點，這是您會發現的最佳選擇之一，它也為定制留下了很大的空間。