如何使用CSS創建自定義範圍滑塊

純CSS打造炫酷自定義範圍滑塊：無需JavaScript，兼顧可訪問性

本文將演示如何僅使用CSS和原生的HTML <input type="range"> 元素創建自定義範圍滑塊，而無需依賴JavaScript，同時確保可訪問性。教程涵蓋了自定義輸入元素的方法，包括重置和禁用瀏覽器默認樣式、設置滑塊樣式以及使用border-image創建滑動漸變效果。此外，還將講解如何添加細微動畫來增強用戶交互，例如點擊時將滑塊從僅邊框的圓圈轉換為完整的圓圈，以及懸停時顏色變暗。此技術保留了原生功能並支持鍵盤導航，為自定義範圍滑塊提供了一種多功能且易於訪問的解決方案。

關鍵要點：

• 使用純CSS和原生HTML <input type="range"> 元素創建自定義範圍滑塊。
• 教程包含自定義輸入元素的步驟：重置和禁用瀏覽器默認樣式，設置滑塊樣式，以及使用border-image創建滑動漸變效果。
• 添加細微動畫以增強用戶體驗，例如點擊時改變滑塊形狀，懸停時改變顏色。
• 保持原生功能並支持鍵盤導航，確保可訪問性。

默認的範圍滑塊樣式並不美觀。下圖展示了Chrome、Firefox和Safari瀏覽器中默認範圍滑塊的顯示效果：

然而，<input type="range"> 元素很難進行樣式設置。大多數在線解決方案依賴於JavaScript和冗長的代碼。更糟糕的是，一些技術還會破壞元素的可訪問性。因此，讓我們看看如何更好地利用純CSS來實現，同時不影響可訪問性。以下CodePen演示展示了我們將要構建的內容：CodePen鏈接

範圍輸入元素的結構

讓我們先剖析範圍輸入元素的結構。它是一個原生元素，每個瀏覽器都有其自己的實現。主要有兩種不同的實現：一種用於Webkit和Blink瀏覽器（如Chrome、Edge、Safari和Opera）：

<input type="range" min="0" max="100" step="1" value="20">

另一種用於Firefox：

<input type="range" min="0" max="100" step="1" value="20">

IE也有第三種實現，但幸運的是，這個瀏覽器現在幾乎已經消失了！瀏覽器之間的這種不一致性使得任務變得困難，因為我們需要為每種實現提供不同的樣式。我不會深入探討這一點，因為這篇文章將永遠寫不完，但我強烈建議閱讀Ana Tudor的這篇文章以進行更深入的探索（此處應插入文章鏈接）。您只需要記住，無論實現如何，“滑塊”（thumb）始終是一個共同的組件。

我將只設置此元素的樣式，這將使我的自定義範圍滑塊易於定制。讓我們直接跳入代碼中，看看神奇之處。

自定義輸入元素

第一步是使用appearance: none和其他一些常用屬性來重置和禁用所有瀏覽器默認樣式：

<input type="range" min="0" max="100" step="1" value="20">

在更複雜的情況下，如果其他默認樣式應用於我們的元素，我們可能需要添加更多代碼。只需確保我們有一個沒有任何視覺樣式的“裸”元素即可。讓我們還定義一些CSS變量，以便我們可以輕鬆地為範圍滑塊創建不同的變體：

<input type="range" min="0" max="100" step="1" value="20">

在此步驟中，只有滑塊及其默認樣式可見。

設置滑塊元素樣式

讓我們設置滑塊元素的樣式。我們將從基本設置開始：

input {
  appearance: none;
  background: none;
  cursor: pointer;
}

使用border-image添加一些神奇效果

現在，我們將使用一個神奇的CSS技巧來完成我們的滑塊。它涉及使用border-image：

input {
  --c: orange; /* 活动颜色 */
  --g: 8px; /* 间隙 */
  --l: 5px; /* 线粗细 */
  --s: 30px; /* 滑块大小 */

  width: 400px; /* 输入宽度 */
  height: var(--s);
  appearance: none;
  background: none;
  cursor: pointer;
}

通過添加overflow: hidden到輸入元素並使用較大的值，幻覺就完美了。

添加一些動畫

我們可以在與滑塊交互時添加一些細微的動畫嗎？它不需要很多代碼，並且會增強滑塊的UX。首先，我們將點擊時將滑塊從僅邊框的圓圈轉換為完整的圓圈。為此，我們增加了box-shadow的spread值。

結論

我們已經完成了，並且不必處理任何復雜的瀏覽器相關實現！我們確定了滑塊元素的選擇器，並使用一些CSS技巧來設置整個範圍滑塊的樣式。別忘了，我們只使用了<input type="range">元素，所以我們不必擔心任何可訪問性問題，因為我們保留了原生功能。滑塊可以毫無問題地支持鍵盤導航。以下是用相同技術創建的更多滑塊示例：CodePen鏈接

CodePen鏈接

以上是如何使用CSS創建自定義範圍滑塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！