???? ?? ????? ???? HTML, CSS, JavaScript? ??? ??? ??????. ??? ?? ? ? ?? CSS? ???? ?? ????? ?? ??? ??? ???? HTML? CSS??? ???? ?? ????? ??? ? ?? ?????. ???? ???? ? ??? ? ??? ????? ????

????, ??? ??, ?? ???? ?? ??? ????? ??? ????? ????? HTML ? CSS? ?? ? ????. ??? ??? ??? ?? ???? ???? ????. ? ??? ?? ??? ? ???? ?? ? ????.

? ????? ?? HTML? ? ??? JavaScript ??? ???? ?? ?? ???? ???? ??? ???????.

HTML

?? ?? ??? ????? ???? ??? ? ?? ?? ?????. ???? 5?? ?(??? 1?) ?? 10?? ?(?? ?? ??)? ??? ? ??? ????? ?????. ???? ??? ?? ??? ? ????.

HTML? ????? ??? ?? ??? ???? ?? ?? ??? ???? ??? ? ????.

<input type="range">

?? ???? ? ??? ?? ???? ????. ??? ??? ?? ? ?? ??? ???? ???.

1. ?? ??? ?????.
2. ?? 0.5~5?
3. ?? ??? ? 2.5????.

? ??? ?? 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? ?? 0.5? ???? ?? ??? ??? ?? ? ???, ???? ???? ??? ????. ?? 0? ??? ???? ???? ?? 11? ????? ??? ????? 10?? ?(?? ?? 10?)? ????? ?? ??? ??? ?? ? ??? ???? ?? ???. ??? ??? ??? ? ?? ???? ???? ??? ??? ??????.

? ??? 11?? ??? ??? ???? ?? ??? ???? ????? ?????. ??? ?? ???(???? ???? 0 ?? ??? ??????), ???(?? ??? ?? ???? ??? ??? ?? ??? ???? ????) ? ???(??? ???? ??? ??? ??????)?

??? ??? ???? ?? ?? ??? ??? ??? ?? ? ?? ????? ?? ?? ?????. ?? HTML ??? ???? ?? ??? ???? ??? ?? ? ??????? ??? ???? ??? ?? ??? 0.5? ??????.

??? ? ?? ?? ??? ??? ????? ? ??? ??? ????? ?????. CSS? ??? ????? ?? ?? ??? ?????.

???? ? ?? ??? ? ???????. ??? ??? ??? ?? ?? ??? ???? ???? ????.

• ??? ??: CSS?? ?? ??? ???? ? ??? ???.
• ??? ???: ?? ?? ???? ??? ?? ??? ????.
• ??? JavaScript: ?? ??? ????? ??? ?? ??? ?????? ?? ?????.

?? ??? ??? ????(???? ?? ?? ??).

<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 ???? ?????.

????? ?????. ?? ??? ?? ????. ?? ?? ???? ??? SVG? ???? ?? CSS? ????? ??????. ??? ?? ? ??? ???? ??? ???? ? ????.

?? ??? ? ?? ?? ????? ?? ???? ???? ???? ??(?: ?)? ?? ??? ? ????.

CSS ???? ???? ??? ????? ??? ???? 5? ?? ????. ?? ??? ??? ????? ???? ???? ???? ? 5?? ?? ???.

<input type="range">

?? ?? ?????? ????? ? ???? Chrome/Safari ? Firefox? ???? ???????. ?? ??? ??? ?? ?? ?? ?? ??? ?? ???? ?? ???????.

?? ??? ??? ????.

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

Webkit? Firefox? ??? ?? ????? ?? ?????. CSS? ???? ?? ??? ?? ?? ???? ?? ??? ????. ?? ?? ?? ??? ?? ?? ?? ? ???? ????.

?? ????? ??? ??? ?? ???? ????? ? ?? ???(??-??-??: ??)? ??????. ????? ??? ????? ???? ???? ?? ?? ? ?????.

????? ????

? ?? ???? ?? ?? ???? ??? ???? ????. ??? ??? ?? ??? ???? ?????. ??? ?????? ??? ?? ??????.

????? 0?? ???? ???.

<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;
}

?? ?? ????? CSS ??? ???? ???? ?? ????? ????(?? ????? ?????). ?? ??? ????? ??? ? ?? ?? ??? ?? ?????. ?? ?? ????? ?? ???? ??? ?? ?? ????? ??? ?? ??? ?? ???? ????. ?? Safari?? ? ??? ?? WebKit? ??? ??????.

?

? ????? ? ?? ??? ????? ???. ??? ?? HTML ??? ???? ??? ? ?? ?? ??? ? ?? ?? ??? ????.

? ??? ??? ?? ?? ???? ??? ?????.

??? ???? ????. ?? ????? ??? ??? ?? ??? ?? ??(?? ??, ?? ? ?? ???)? ???? ???? ???.

????? ?? ?? ???? ?? ?? ??? ??? ????? ??? ?? ?? ?????. ??? ?? ? ??? ???? ??? ?? ?????.

??

? ????? ???? ??? ?????. ?? HTML? CSS? ???? ? ??? ?????(??? JavaScript ?? ?? ??) ???? ? ?? JavaScript? ???? ?? ?? ???? ??? ?? ????.?

?? ????? ???? HTML ? CSS ???? ??? ??? ? ??? ?? ?? ???? ?? ??? ????? ??? ??? ?? ???? ????.

?? ??? ??? ???? ????? ?? ?? ?? ???, ??? ?? JavaScript ?? ?? CSS? ???? ????. ?? ??? ?? ?????. ???? ???? ?? ??? ?? ????? ???? ?? ??? ????? ?? ??? ?????. ?? ???? ? ?? ??? ? ??? ??? ?? ??? ??? ?? ?????.

?? ????? ???? ?? ???? ? ? ??? ??? ?? ??? ??? ?? ?? ???? ??? ?? ???? ??? ? ??? ????.

??? ????? ????. ?? ?????!

? ??? ?? HTML ?? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!