純CSS打造炫酷自定義範圍滑塊：無需JavaScript，兼顧可訪問性
本文將演示如何僅使用CSS和原生的HTML <input type="range"> 元素創建自定義範圍滑塊，而無需依賴JavaScript，同時確保可訪問性。教程涵蓋了自定義輸入元素的方法，包括重置和禁用瀏覽器默認樣式、設置滑塊樣式以及使用border-image創建滑動漸變效果。此外，還將講解如何添加細微動畫來增強用戶交互，例如點擊時將滑塊從僅邊框的圓圈轉換為完整的圓圈，以及懸停時顏色變暗。此技術保留了原生功能並支持鍵盤導航，為自定義範圍滑塊提供了一種多功能且易於訪問的解決方案。
關鍵要點：
<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鏈接
以上是如何使用CSS創建自定義範圍滑塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
