構(gòu)建星級(jí)評(píng)分組件是Web開發(fā)中的經(jīng)典練習(xí)，已使用多種技術(shù)反復(fù)實(shí)現(xiàn)。通常需要少量JavaScript代碼，但僅使用CSS實(shí)現(xiàn)呢？是的，可以！

這是一個(gè)僅使用CSS實(shí)現(xiàn)的星級(jí)評(píng)分組件演示。您可以點(diǎn)擊更新評(píng)分。

很酷，對(duì)吧？除了僅使用CSS外，HTML代碼只是一個(gè)單一元素：

<input type="range">

範(fàn)圍輸入元素是理想的選擇，因?yàn)樗试S用戶在兩個(gè)邊界（最小值和最大值）之間選擇數(shù)值。我們的目標(biāo)是設(shè)計(jì)這個(gè)原生元素，將其轉(zhuǎn)換為星級(jí)評(píng)分組件，無(wú)需額外的標(biāo)記或任何腳本！我們還將在最後創(chuàng)建更多組件，敬請(qǐng)關(guān)注。

注意： 本文僅關(guān)注CSS部分。雖然我盡力考慮了UI、UX和可訪問性方面，但我的組件並不完美。它可能有一些缺點(diǎn)（錯(cuò)誤、可訪問性問題等），因此請(qǐng)謹(jǐn)慎使用。

<input type="range"> 元素

您可能知道，由於所有默認(rèn)的瀏覽器樣式以及不同的內(nèi)部結(jié)構(gòu)，設(shè)計(jì)原生元素（如輸入元素）有點(diǎn)棘手。例如，如果您檢查範(fàn)圍輸入元素的代碼，您會(huì)在Chrome（或Safari、Edge）和Firefox之間看到不同的HTML。

幸運(yùn)的是，我們有一些共同的部分，我將依賴這些部分。我將定位兩個(gè)不同的元素：主元素（輸入本身）和滑塊元素（您使用鼠標(biāo)滑動(dòng)以更新值的那個(gè)元素）。

我們的CSS主要如下所示：

input[type="range"] {
  /* 主元素樣式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑塊樣式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑塊樣式 */
}

唯一的缺點(diǎn)是我們需要重複滑塊元素的樣式兩次。不要嘗試執(zhí)行以下操作：

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑塊樣式 */
}

這不起作用，因?yàn)檎麄€(gè)選擇器無(wú)效。 Chrome等不理解::-moz-*部分，而Firefox不理解::-webkit-*部分。為簡(jiǎn)單起見，在本文中，我將使用以下選擇器：

input[type="range"]::thumb {
  /* 滑塊樣式 */
}

但是演示包含帶有重複樣式的真實(shí)選擇器。介紹足夠了，讓我們開始編碼吧！

主元素樣式（星形）

我們首先定義大?。?/p>

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: 5;

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */
}

如果我們認(rèn)為每顆星都位於一個(gè)正方形區(qū)域內(nèi)，那麼對(duì)於5星級(jí)評(píng)分，我們需要寬度等於高度的五倍，因此使用aspect-ratio: 5。

該5值也定義為輸入元素的max屬性的值。

<input type="range" max="5">

因此，我們可以依靠新增強(qiáng)的attr()函數(shù)（目前僅限Chrome）來(lái)讀取該值，而不是手動(dòng)定義它！

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */
}</number>

現(xiàn)在您可以通過簡(jiǎn)單地調(diào)整max屬性來(lái)控制星星的數(shù)量。這很棒，因?yàn)?code>max屬性也被瀏覽器內(nèi)部使用，因此更新該值將控制我們的實(shí)現(xiàn)以及瀏覽器的行為。

這個(gè)增強(qiáng)的attr()版本目前僅在Chrome中可用，因此我所有的演示都包含一個(gè)後備方案來(lái)幫助不支持的瀏覽器。

下一步是使用CSS遮罩來(lái)創(chuàng)建星星。我們需要形狀重複五次（或更多次，取決於max值），因此遮罩大小應(yīng)等於var(--s) var(--s)或var(--s) 100%或簡(jiǎn)化為var(--s)，因?yàn)槟J(rèn)情況下高度將等於100%。

<input type="range">

您可能會(huì)問mask-image屬性是什麼？我想我告訴您它需要一些漸變並不奇怪，但它也可以是SVG。本文是關(guān)於創(chuàng)建星級(jí)評(píng)分組件的，但我希望星形部分保持通用性，以便您可以輕鬆地將其替換為任何您想要的形狀。這就是為什麼我在這篇文章的標(biāo)題中說(shuō)“還有更多”。我們稍後將看到如何使用相同的代碼結(jié)構(gòu)獲得各種不同的變體。

這裡有一個(gè)演示，展示了星形的兩種不同的實(shí)現(xiàn)方式。一種是使用漸變，另一種是使用SVG。

在這種情況下，SVG實(shí)現(xiàn)看起來(lái)更簡(jiǎn)潔，代碼也更短，但請(qǐng)記住這兩種方法，因?yàn)闈u變實(shí)現(xiàn)有時(shí)可以做得更好。

滑塊樣式（選中值）

現(xiàn)在讓我們關(guān)注滑塊元素。使用最後一個(gè)演示，然後單擊星星，並註意滑塊的位置。

好消息是，對(duì)於所有值（從最小值到最大值），滑塊始終位於給定星形的區(qū)域內(nèi)，但每個(gè)星形的位置不同。如果位置始終相同，而不管值如何，那就更好了。理想情況下，為了保持一致性，滑塊應(yīng)始終位於星形的中心。

這是一張圖，用於說(shuō)明位置以及如何更新它。

這些線是每個(gè)值的滑塊位置。在左側(cè)，我們有默認(rèn)位置，其中滑塊從主元素的左邊緣移動(dòng)到右邊緣。在右側(cè)，如果我們通過在兩側(cè)添加一些空間來(lái)限制滑塊的位置到較小的區(qū)域，我們將獲得更好的對(duì)齊方式。該空間等於一顆星大小的一半，或var(--s)/2。我們可以為此使用填充：

input[type="range"] {
  /* 主元素樣式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑塊樣式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑塊樣式 */
}

它更好，但並不完美，因?yàn)槲覜]有考慮滑塊大小，這意味著我們沒有真正的居中。這不是問題，因?yàn)槲覍⑹褂玫褥?px的寬度使滑塊的大小非常小。

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑塊樣式 */
}

滑塊現(xiàn)在是一條細(xì)線，位於星形的中心。我使用紅色來(lái)突出顯示位置，但在現(xiàn)實(shí)中，我不需要任何顏色，因?yàn)樗鼘⑹峭该鞯摹?

您可能認(rèn)為我們距離最終結(jié)果還很遠(yuǎn)，但我們快完成了！缺少一個(gè)屬性來(lái)完成這個(gè)難題：border-image。

border-image屬性允許我們使用其outset功能在元素外部繪製裝飾。為此，我使滑塊變小且透明。著色將使用border-image完成。我將使用具有兩種純色的漸變作為源：

input[type="range"]::thumb {
  /* 滑塊樣式 */
}

我們編寫如下內(nèi)容：

<input type="range">

上述內(nèi)容意味著我們將border-image的區(qū)域從元素的每一側(cè)擴(kuò)展100px，並且漸變將填充該區(qū)域。換句話說(shuō)，漸變的每種顏色將覆蓋該區(qū)域的一半，即100px。

你明白邏輯了嗎？我們?cè)诨瑝K的每一側(cè)創(chuàng)建了一種溢出的著色——一種將邏輯地跟隨滑塊的著色，因此每次單擊一顆星時(shí)，它都會(huì)滑入到位！

現(xiàn)在，讓我們使用一個(gè)非常大的值而不是100px：

我們快完成了！著色填充了所有星星，但我們不希望它位於中間，而是位於整個(gè)選定星形上。為此，我們稍微更新一下漸變，而不是使用50%，我們使用50% var(--s)/2。我們添加一個(gè)等於星形寬度一半的偏移量，這意味著第一種顏色將佔(zhàn)據(jù)更多空間，我們的星級(jí)評(píng)分組件就完美了！

我們?nèi)匀豢梢陨晕?yōu)化代碼，而不是為滑塊定義高度，我們將它保持為0，並且考慮border-image的垂直outset來(lái)擴(kuò)展著色。

input[type="range"] {
  /* 主元素樣式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑塊樣式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑塊樣式 */
}

我們也可以使用圓錐漸變來(lái)不同地編寫漸變：

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑塊樣式 */
}

我知道border-image的語(yǔ)法不容易理解，我對(duì)解釋有點(diǎn)快。但我有一篇非常詳細(xì)的文章發(fā)表在Smashing Magazine上，我在其中用很多例子剖析了這個(gè)屬性，我邀請(qǐng)您閱讀，以便更深入地了解該屬性的工作原理。

我們組件的完整代碼如下：

input[type="range"]::thumb {
  /* 滑塊樣式 */
}

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: 5;

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */
}

就是這樣！幾行CSS代碼，我們就得到了一個(gè)漂亮的星級(jí)評(píng)分組件！

半星評(píng)分

如何將評(píng)分粒度設(shè)置為半星？這很常見，我們可以通過進(jìn)行一些調(diào)整來(lái)完成之前的代碼。

首先，我們將輸入元素更新為以半步而不是全步遞增：

<input type="range" max="5">

默認(rèn)情況下，步長(zhǎng)等於1，但我們可以將其更新為.5（或任何值），然後也將最小值更新為.5。在CSS方面，我們將填充從var(--s)/2更改為var(--s)/4，並且對(duì)漸變中的偏移量也執(zhí)行相同的操作。

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */
}</number>

兩種實(shí)現(xiàn)方式之間的差異是一個(gè)二分之一的因子，這也是步長(zhǎng)值。這意味著我們可以使用attr()並創(chuàng)建適用於這兩種情況的通用代碼。

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 刪除默認(rèn)瀏覽器樣式 */

  mask-image: /* ... */;
  mask-size: var(--s);
}</number>

這是一個(gè)演示，其中修改步長(zhǎng)是您需要做的所有事情來(lái)控製粒度。不要忘記，您還可以使用max屬性來(lái)控制星星的數(shù)量。

使用鍵盤調(diào)整評(píng)分

如您所知，我們可以使用鍵盤調(diào)整範(fàn)圍滑塊輸入的值，因此我們也可以使用鍵盤來(lái)控制評(píng)分。這是一件好事，但有一個(gè)警告。由於使用了mask屬性，我們不再具有指示鍵盤焦點(diǎn)的默認(rèn)輪廓，這對(duì)依賴鍵盤輸入的用戶來(lái)說(shuō)是一個(gè)可訪問性問題。

為了獲得更好的用戶體驗(yàn)並使組件更易於訪問，最好在焦點(diǎn)時(shí)顯示輪廓。最簡(jiǎn)單的解決方案是添加一個(gè)額外的包裝器：

<input type="range">

當(dāng)內(nèi)部的輸入具有焦點(diǎn)時(shí)，這將具有輪廓：

input[type="range"] {
  /* 主元素樣式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑塊樣式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑塊樣式 */
}

嘗試在下面的示例中使用鍵盤來(lái)調(diào)整這兩個(gè)評(píng)分：

另一個(gè)想法是考慮更複雜的遮罩配置，該配置使元素周圍的小區(qū)域保持可見以顯示輪廓：

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑塊樣式 */
}

我更喜歡使用最後一種方法，因?yàn)樗３至藛卧貙?shí)現(xiàn)，但也許您的HTML結(jié)構(gòu)允許您在父元素上添加焦點(diǎn)，您可以保持遮罩配置簡(jiǎn)單。這完全取決於您！

更多示例！

正如我之前所說(shuō)，我們製作的不僅僅是一個(gè)星級(jí)評(píng)分組件。您可以輕鬆更新遮罩值以使用任何您想要的形狀。

這是一個(gè)示例，我使用的是心的SVG而不是星形。

為什麼不是蝴蝶？

這次我使用PNG圖像作為遮罩。如果您不習(xí)慣使用SVG或漸變，則可以使用透明圖像。只要您有SVG、PNG或漸變，您就可以使用此方法做任何形狀的事情。

我們可以進(jìn)一步定制並創(chuàng)建一個(gè)像下面的音量控制組件：

在最後一個(gè)示例中，我沒有重複特定的形狀，而是使用複雜的遮罩配置來(lái)創(chuàng)建信號(hào)形狀。

結(jié)論

我們從一個(gè)星級(jí)評(píng)分組件開始，最後得到了許多很酷的示例。標(biāo)題本可以是“如何設(shè)計(jì)範(fàn)圍輸入元素”，因?yàn)檫@就是我們所做的。我們?cè)跊]有任何腳本或額外標(biāo)記的情況下升級(jí)了一個(gè)原生組件，並且只使用了幾行CSS代碼。

你呢？你能想到另一個(gè)使用相同代碼結(jié)構(gòu)的漂亮組件嗎？在評(píng)論區(qū)分享您的示例！

文章系列

1. 僅CSS的星級(jí)評(píng)分組件及更多！ （第一部分）
2. 僅CSS的星級(jí)評(píng)分組件及更多！ （第二部分）— 3月7日推出!

以上是僅CSS的星級(jí)等級(jí)組件等等！ （第1部分）的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！