過去，創(chuàng)建自定義組件需要 HTML、CSS 和 JavaScript 的復雜組合。然而，近年來 CSS 的進步使我們能夠僅使用 HTML 和 CSS? 構建許多組件 - 利用瀏覽器中已內置的邏輯。當我們可以重復使用大部分輪子時，為什么還要重新發(fā)明輪子呢？

諸如復選框、單選按鈕和切換開關之類的簡單組件可以使用 HTML 和 CSS 創(chuàng)建，同時依賴瀏覽器的功能。但我們并不局限于簡單的組件。更復雜的組件也可以通過這種方式實現(xiàn)。

在本文中，我們將探索如何使用單個 HTML 和一個 JavaScript 命令構建星級評級系統(tǒng)。

超文本標記語言

星級評定組件本質上是用戶可以從中選擇一個的一系列值。變體可能包括 5 個值（每顆星一個）或 10 個值（允許半顆星），但想法保持不變?-?用戶可以選擇一個值，并且只能選擇一個值。

HTML 提供了專為范圍設計的輸入類型，我們可以將其用作組件的基礎：

<input type="range">

就目前情況而言，此輸入并不是很有用。我們需要根據(jù)我們的設計規(guī)范定義一些屬性：

1. 允許半星評級。
2. 0.5 到 5 星不等。
3. 默認選擇為 2.5 星。

根據(jù)上述規(guī)范，HTML 將如下所示：

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

此組件是一個范圍輸入 ()，允許用戶選擇 0.5 (min="0.5") 和 5 星 (max="5") 之間的值，增量為0.5（步長=“0.5”）。初始值設置為 2.5 星 (value="2.5")。

將最小值設置為 0.5 而不是 0 可能看起來不尋常，但這是有實際原因的。允許 0 星審核將創(chuàng)建 11 個潛在值，但該范圍在視覺上代表 10 個值（10 個半星），從而導致可點擊區(qū)域與范圍內的星星不匹配。這種設計選擇確保了更好的可用性并簡化了以后的實現(xiàn)。

通過使用 11 個單選按鈕創(chuàng)建組件可以部分解決此問題。但這會在設計（我們如何使用鼠標選擇 0 值？）、可用性（我們應該模仿范圍輸入的本機行為還是單選按鈕的本機行為？）和可訪問性（如何我們管理整個組件的焦點？）

這些對于另一個關于如何使用單選按鈕創(chuàng)建評級組件的教程來說是很好的問題。對于本教程，介紹如何使用單個 HTML 元素創(chuàng)建組件，我選擇最小值 0.5 以避免這些復雜性。

我們稍后會添加一些調整，但此代碼可以作為一個堅實的起點。沒有任何 CSS，它在視覺上類似于標準范圍輸入：

接下來，我們將添加更多屬性。雖然它們目前看起來并不重要，但以后它們會很重要：

• 類名：幫助識別CSS中輸入的范圍。
• 內聯(lián)樣式：使用自定義屬性來存儲輸入的值。
• 內聯(lián) JavaScript：用于更新上面內聯(lián)樣式中的自定義屬性的單個命令。

最終代碼將如下所示（為了便于閱讀而格式化）：

<input type="range">

在下一節(jié)中，我們將稍微完善這個規(guī)則。我們必須為 Chrome/Safari 和 Firefox 定義樣式，這會帶來一些重復。我們可以通過使用自定義屬性來存儲值并將它們應用于兩種樣式來簡化流程。

設置軌道樣式

軌道將占據(jù)元素的整個大小，然后我們將使用漸變?yōu)槲覀冃枰牟糠种?/p>

我們不需要擔心寬度——它會占據(jù)元素的整個寬度——但高度是另一回事。雖然 Chrome 和 Firefox 使軌道的高度與容器相匹配，但 Safari 卻不然。因此，我們必須明確指定 100% 的高度。

接下來我們要定義彩色區(qū)域。我們將利用之前創(chuàng)建的 --val 和 --size 自定義屬性。我們將設置一個從左到右的線性漸變，在 --val 屬性指示的點改變顏色：

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

我們將將此漸變移動到父元素中的另一個自定義屬性。這使我們能夠重用 Chrome/Safari 和 Firefox 的值——正如我之前提到的……稍后可能會提到。

這樣，我們就有了一個矩形，其中較暗的區(qū)域代表所選值。當我們單擊或滑過矩形時，黑色區(qū)域會發(fā)生變化，這是所需的功能，但缺乏視覺效果。我們需要 CSS 遮罩。

我不否認，下面的部分很難看。我選擇全面使用 CSS，而不依賴外部圖像或內聯(lián) SVG。您可以使用這些選項中的任何一個來簡化代碼。

以下代碼適用于星形評級組件，但我們可以通過更改蒙版輕松更改形狀（例如，更改為圓形）。

我們將使用一組圓錐漸變來使用 CSS 蒙版來剪輯五點星。它考慮了輸入范圍的大小，因此，在水平重復掩碼后，我們將得到五顆星：

<input type="range">

與上面的線性漸變一樣，我們將在 Chrome/Safari 和 Firefox 的樣式中應用此遮罩。為了避免代碼重復，我們將在父元素內的自定義屬性中定義它。

最終代碼將如下所示：

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

請注意 Webkit 和 Firefox 的代碼幾乎相同。 CSS 中的 mixins 這樣的功能在這種情況下會非常有幫助——盡管有一個受支持的標準會更好。

我們還添加了一些樣式（打印顏色調整：精確）以確保組件的打印與屏幕上顯示的完全一致。這在使用背景時非常有用，因為默認情況下通常不會打印背景。

設置拇指樣式

在這個星級評定系統(tǒng)的情況下，拇指并不是特別重要。視覺效果是利用軌道本身來實現(xiàn)的。因此，我們將把拇指隱藏起來。

我們可以通過將其不透明度設置為零來做到這一點：

<input 
  type="range"
  min="0.5"
  max="5"
  step="0.5"
  value="2.5"
 >



<h2>
  
  
  The CSS
</h2>

<p>Styling range inputs can be tricky–but not excessively complex. Unfortunately, it requires a lot of repetition due to lack of support and standardization, so we must use vendor prefixes and browser-specific pseudo-classes for the different elements of the component:</p>

• thumb: the element user can move to change the value. The pseudo-elements are?::-webkit-slider-thumb (Chrome and Safari) and?::-moz-range-thumb (Firefox)
• track: the area or line along which the thumb slides. The pseudo-elements are?::-webkit-slider-runnable-track (Chrome and Safari) and?::-moz-range-track (Firefox)

And, of course, we'll need to apply some specific styles for each browser, as they don't style the component consistently. For example, we'll need to set up heights on Safari or remove a pesky border on Firefox.

From here, the next steps are as follows:

1. Defined the size of the star-rating component.
2. Mask the track to only keep the shapes of the stars visible.
3. Define the background that only colors the selected stars.
4. Hide the thumb.

Hiding the thumb is optional and it will depend on the type of component you are building. It makes sense to hide the thumb in this star-rating system. However, in a user-satisfaction component, the thumb may be useful. You can explore different demos at the end of this article.

Styling the range?element

The first step will be removing the default appearance of the range input. This can be done that by setting the the appearance:none property. All modern browsers support it, but we may want to add the vendor-prefixed versions, so it's compatible with older browsers too.

Since we have five stars, it makes sense to set the width to five times the height. aspect-ratio: 5/1 could handle this, but some browsers still have inconsistent support, so we'll "hard code" the size using a custom property.

Additionally, we want to remove the border. Firefox applies a default border to the ranges, and removing it ensures a more consistent styling across browsers.

.star-rating {
  --size: 2rem;
  height: var(--size);
  width: calc(5 * var(--size));
  appearance: none;
  border: 0;
}

您可能已經(jīng)注意到，我在上面的代碼片段中沒有使用 CSS 嵌套（而我在下面的演示中使用了它）。這是因為嵌套相對較新，并且存在一些限制：許多舊版瀏覽器不支持它，而且一些現(xiàn)代瀏覽器也難以應對非標準偽元素 - 我在 WebKit 上報告了有關 Safari 上此行為的錯誤。

示例

人們說一圖勝千言。因此，這里有一些可以使用單個 HTML 元素進行編碼的輸入范圍示例。

讓我們從本文中描述的星級評分組件開始：

接下來是一個豐富多彩的例子。它具有非典型的形狀，需要對范圍輸入的所有部分進行樣式設計：范圍本身、軌道和拇指：

最后，我最喜歡的一個：一個動畫的單元素用戶滿意度組件。選擇任何不同的面孔，它們將根據(jù)選擇移動：

結論

有許多不同的方法來編碼這個組件。我僅使用 HTML 和 CSS（使用一個內聯(lián) JavaScript 命令）完成此操作，但您也可以使用圖像或更多 JavaScript 來防止這種丑陋的內聯(lián)。?

關鍵思想是，只需進行最少的 HTML 和 CSS 更改，您就可以調整規(guī)范，并且您的星級評級系統(tǒng)的行為會略有不同或看起來完全不同。

該組件還可以使用多個單選按鈕重新創(chuàng)建，這將消除對 JavaScript 行和一些 CSS 的需要。這是一個有效的方法。它將需要額外的代碼來確保可訪問性并復制帶有輸入范圍的開箱即用的默認行為。有些人可能會發(fā)現(xiàn)這種方法更容易，而且確實可行。

這是我最喜歡軟件開發(fā)的事情之一：有許多不同的方法和選項，每種方法和選項都有其優(yōu)點和缺點，而且都可以完美實現(xiàn)。

我希望你喜歡這篇文章。繼續(xù)編碼！

以上是單個 HTML 元素星級評定組件的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！