过去，创建自定义组件需要 HTML、CSS 和 JavaScript 的复杂组合。然而，近年来 CSS 的进步使我们能够仅使用 HTML 和 CSS 构建许多组件 - 利用浏览器中已内置的逻辑。当我们可以重复使用大部分轮子时，为什么还要重新发明轮子呢？
诸如复选框、单选按钮和切换开关之类的简单组件可以使用 HTML 和 CSS 创建，同时依赖浏览器的功能。但我们并不局限于简单的组件。更复杂的组件也可以通过这种方式实现。
在本文中，我们将探索如何使用单个 HTML 和一个 JavaScript 命令构建星级评级系统。
星级评定组件本质上是用户可以从中选择一个的一系列值。变体可能包括 5 个值（每颗星一个）或 10 个值（允许半颗星），但想法保持不变 - 用户可以选择一个值，并且只能选择一个值。
HTML 提供了专为范围设计的输入类型，我们可以将其用作组件的基础：
<input type="range">
就目前情况而言，此输入并不是很有用。我们需要根据我们的设计规范定义一些属性：
根据上述规范，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 星审核将创建 11 个潜在值，但该范围在视觉上代表 10 个值（10 个半星），从而导致可点击区域与范围内的星星不匹配。这种设计选择确保了更好的可用性并简化了以后的实现。
通过使用 11 个单选按钮创建组件可以部分解决此问题。但这会在设计（我们如何使用鼠标选择 0 值？）、可用性（我们应该模仿范围输入的本机行为还是单选按钮的本机行为？）和可访问性（如何我们管理整个组件的焦点？）
这些对于另一个关于如何使用单选按钮创建评级组件的教程来说是很好的问题。对于本教程，介绍如何使用单个 HTML 元素创建组件，我选择最小值 0.5 以避免这些复杂性。
我们稍后会添加一些调整，但此代码可以作为一个坚实的起点。没有任何 CSS，它在视觉上类似于标准范围输入：
接下来，我们将添加更多属性。虽然它们目前看起来并不重要，但以后它们会很重要：
最终代码将如下所示（为了便于阅读而格式化）：
<input type="range">
在下一节中，我们将稍微完善这个规则。我们必须为 Chrome/Safari 和 Firefox 定义样式，这会带来一些重复。我们可以通过使用自定义属性来存储值并将它们应用于两种样式来简化流程。
轨道将占据元素的整个大小，然后我们将使用渐变为我们需要的部分着色。
我们不需要担心宽度——它会占据元素的整个宽度——但高度是另一回事。虽然 Chrome 和 Firefox 使轨道的高度与容器相匹配，但 Safari 却不然。因此，我们必须明确指定 100% 的高度。
接下来我们要定义彩色区域。我们将利用之前创建的 --val 和 --size 自定义属性。我们将设置一个从左到右的线性渐变，在 --val 属性指示的点改变颜色：
<input type="range" min="0.5" max="5" step="0.5" value="2.5">
我们将将此渐变移动到父元素中的另一个自定义属性。这使我们能够重用 Chrome/Safari 和 Firefox 的值——正如我之前提到的……稍后可能会提到。
这样，我们就有了一个矩形，其中较暗的区域代表所选值。当我们单击或滑过矩形时，黑色区域会发生变化，这是所需的功能，但缺乏视觉效果。我们需要 CSS 遮罩。
我不否认，下面的部分很难看。我选择全面使用 CSS，而不依赖外部图像或内联 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 这样的功能在这种情况下会非常有帮助——尽管有一个受支持的标准会更好。
我们还添加了一些样式（打印颜色调整：精确）以确保组件的打印与屏幕上显示的完全一致。这在使用背景时非常有用，因为默认情况下通常不会打印背景。
在这个星级评定系统的情况下，拇指并不是特别重要。视觉效果是利用轨道本身来实现的。因此，我们将把拇指隐藏起来。
我们可以通过将其不透明度设置为零来做到这一点：
<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>
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:
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.
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;
}
您可能已经注意到，我在上面的代码片段中没有使用 CSS 嵌套（而我在下面的演示中使用了它）。这是因为嵌套相对较新，并且存在一些限制：许多旧版浏览器不支持它，而且一些现代浏览器也难以应对非标准伪元素 - 我在 WebKit 上报告了有关 Safari 上此行为的错误。
人们说一图胜千言。因此，这里有一些可以使用单个 HTML 元素进行编码的输入范围示例。
让我们从本文中描述的星级评分组件开始：
接下来是一个丰富多彩的例子。它具有非典型的形状，需要对范围输入的所有部分进行样式设计：范围本身、轨道和拇指：
最后，我最喜欢的一个：一个动画的单元素用户满意度组件。选择任何不同的面孔，它们将根据选择移动：
有许多不同的方法来编码这个组件。我仅使用 HTML 和 CSS（使用一个内联 JavaScript 命令）完成此操作，但您也可以使用图像或更多 JavaScript 来防止这种丑陋的内联。
关键思想是，只需进行最少的 HTML 和 CSS 更改，您就可以调整规范，并且您的星级评级系统的行为会略有不同或看起来完全不同。
该组件还可以使用多个单选按钮重新创建，这将消除对 JavaScript 行和一些 CSS 的需要。这是一个有效的方法。它将需要额外的代码来确保可访问性并复制带有输入范围的开箱即用的默认行为。有些人可能会发现这种方法更容易，而且确实可行。
这是我最喜欢软件开发的事情之一：有许多不同的方法和选项，每种方法和选项都有其优点和缺点，而且都可以完美实现。
我希望你喜欢这篇文章。继续编码！
以上是单个 HTML 元素星级评定组件的详细内容。更多信息请关注PHP中文网其他相关文章！
