純CSS打造炫酷自定義範(fàn)圍滑塊：無(wú)需JavaScript，兼顧可訪問性

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

關(guān)鍵要點(diǎn)：

• 使用純CSS和原生HTML <input type="range"> 元素創(chuàng)建自定義範(fàn)圍滑塊。
• 教程包含自定義輸入元素的步驟：重置和禁用瀏覽器默認(rèn)樣式，設(shè)置滑塊樣式，以及使用border-image創(chuàng)建滑動(dòng)漸變效果。
• 添加細(xì)微動(dòng)畫以增強(qiáng)用戶體驗(yàn)，例如點(diǎn)擊時(shí)改變滑塊形狀，懸停時(shí)改變顏色。
• 保持原生功能並支持鍵盤導(dǎo)航，確?？稍L問性。

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

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

範(fàn)圍輸入元素的結(jié)構(gòu)

讓我們先剖析範(fàn)圍輸入元素的結(jié)構(gòu)。它是一個(gè)原生元素，每個(gè)瀏覽器都有其自己的實(shí)現(xiàn)。主要有兩種不同的實(shí)現(xiàn)：一種用於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也有第三種實(shí)現(xiàn)，但幸運(yùn)的是，這個(gè)瀏覽器現(xiàn)在幾乎已經(jīng)消失了！瀏覽器之間的這種不一致性使得任務(wù)變得困難，因?yàn)槲覀冃枰獮槊糠N實(shí)現(xiàn)提供不同的樣式。我不會(huì)深入探討這一點(diǎn)，因?yàn)檫@篇文章將永遠(yuǎn)寫不完，但我強(qiáng)烈建議閱讀Ana Tudor的這篇文章以進(jìn)行更深入的探索（此處應(yīng)插入文章鏈接）。您只需要記住，無(wú)論實(shí)現(xiàn)如何，“滑塊”（thumb）始終是一個(gè)共同的組件。

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

自定義輸入元素

第一步是使用appearance: none和其他一些常用屬性來(lái)重置和禁用所有瀏覽器默認(rèn)樣式：

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

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

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

在此步驟中，只有滑塊及其默認(rèn)樣式可見。

設(shè)置滑塊元素樣式

讓我們?cè)O(shè)置滑塊元素的樣式。我們將從基本設(shè)置開始：

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

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

現(xiàn)在，我們將使用一個(gè)神奇的CSS技巧來(lái)完成我們的滑塊。它涉及使用border-image：

input {
  --c: orange; /* 活動(dòng)顏色 */
  --g: 8px; /* 間隙 */
  --l: 5px; /* 線粗細(xì) */
  --s: 30px; /* 滑塊大小 */

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

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

添加一些動(dòng)畫

我們可以在與滑塊交互時(shí)添加一些細(xì)微的動(dòng)畫嗎？它不需要很多代碼，並且會(huì)增強(qiáng)滑塊的UX。首先，我們將點(diǎn)擊時(shí)將滑塊從僅邊框的圓圈轉(zhuǎn)換為完整的圓圈。為此，我們?cè)黾恿?code>box-shadow的spread值。

結(jié)論

我們已經(jīng)完成了，並且不必處理任何復(fù)雜的瀏覽器相關(guān)實(shí)現(xiàn)！我們確定了滑塊元素的選擇器，並使用一些CSS技巧來(lái)設(shè)置整個(gè)範(fàn)圍滑塊的樣式。別忘了，我們只使用了<input type="range">元素，所以我們不必?fù)?dān)心任何可訪問性問題，因?yàn)槲覀儽Ａ袅嗽δ堋；瑝K可以毫無(wú)問題地支持鍵盤導(dǎo)航。以下是用相同技術(shù)創(chuàng)建的更多滑塊示例：CodePen鏈接

CodePen鏈接

以上是如何使用CSS創(chuàng)建自定義範(fàn)圍滑塊的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！