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

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

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

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

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

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

范圍輸入元素的結(jié)構(gòu)

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

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

自定義輸入元素

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

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

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

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

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

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

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

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

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

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

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

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

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

添加一些動畫

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

結(jié)論

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

CodePen鏈接

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