如何使用单个输入创建星级评级？

Question

我正在使用 Oracle Apex 框架创建动态调查，并且我想使用单个输入元素创建星级评级

<input class="rating" max="5" step="1" type="range" value="5" data-id="15" name="f30">

Answer 1

如何使用单个输入创建星级评级？

来源：https://dev.to/madsstoumann/star- rating-using-a-single-input-i0l

Codepen：https://codepen.io/stoumann/pen/yLbYOdz

复制在此供参考：

.rating {
  --dir: right;
  --fill: gold;
  --fillbg: rgba(100, 100, 100, 0.15);
  --heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
  --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
  --stars: 5;
  --starsize: 3rem;
  --symbol: var(--star);
  --value: 1;
  --w: calc(var(--stars) * var(--starsize));
  --x: calc(100% * (var(--value) / var(--stars)));
  block-size: var(--starsize);
  inline-size: var(--w);
  position: relative;
  touch-action: manipulation;
  -webkit-appearance: none;
}
[dir="rtl"] .rating {
  --dir: left;
}
.rating::-moz-range-track {
  background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
  block-size: 100%;
  mask: repeat left center/var(--starsize) var(--symbol);
}
.rating::-webkit-slider-runnable-track {
  background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
  block-size: 100%;
  mask: repeat left center/var(--starsize) var(--symbol);
  -webkit-mask: repeat left center/var(--starsize) var(--symbol);
}
.rating::-moz-range-thumb {
  height: var(--starsize);
  opacity: 0;
  width: var(--starsize);
}
.rating::-webkit-slider-thumb {
  height: var(--starsize);
  opacity: 0;
  width: var(--starsize);
  -webkit-appearance: none;
}
.rating, .rating-label {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.rating-label {
  margin-block-end: 1rem;
}

/* NO JS */
.rating--nojs::-moz-range-track {
  background: var(--fillbg);
}
.rating--nojs::-moz-range-progress {
  background: var(--fill);
  block-size: 100%;
  mask: repeat left center/var(--starsize) var(--star);
}
.rating--nojs::-webkit-slider-runnable-track {
  background: var(--fillbg);
}
.rating--nojs::-webkit-slider-thumb {
  background-color: var(--fill);
  box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
  opacity: 1;
  width: 1px;
}
[dir="rtl"] .rating--nojs::-webkit-slider-thumb {
  box-shadow: var(--w) 0 0 var(--w) var(--fill);
}

<label class="rating-label"><strong>“Half stars” using <code>step="0.5"</code></strong>
  <input
    class="rating"
    max="5"
    oninput="this.style.setProperty('--value', `${this.valueAsNumber}`)"
    step="0.5"
    style="--value:2.5"
    type="range"
    value="2.5">
</label>

<label class="rating-label"><strong>Hearts using <code>step="0.25"</code></strong>
  <input
    class="rating"
    max="5"
    oninput="this.style.setProperty('--value', `${this.valueAsNumber}`)"
    step="0.25"
    style="--fill: #C8102E;--symbol:var(--heart);--value:2.75"
    type="range"
    value="2.75">
</label>

<label class="rating-label"><strong>Set <code>max</code> and <code>--stars</code> to “6”</strong>
  <input
    class="rating"
    max="6"
    oninput="this.style.setProperty('--value', `${this.valueAsNumber}`)"
    step="1"
    style="--stars:6;--value:2"
    type="range"
    value="2">
</label>

<label class="rating-label" dir="rtl"><strong>Set <code>dir</code> to <code>rtl</code></strong>
  <input
    class="rating"
    max="5"
    oninput="this.style.setProperty('--value', this.value)"
    step="0.5"
    style="--value:2"
    type="range"
    value="2">
</label>

<label class="rating-label"><strong>No JS, using <code>box-shadow</code></strong>
  <input
    class="rating rating--nojs"
    max="5"
    step="1"
    type="range"
    value="3">
</label>

<label class="rating-label" dir="rtl"><strong>No JS <code>rtl</code></strong>
  <input
    class="rating rating--nojs"
    max="5"
    step="1"
    type="range"
    value="2">
</label>

<label class="rating-label"><strong>Average rating is 3.37 <code>readonly</code></strong>
  <input
    class="rating"
    max="5"
    readonly
    step="0.01"
    style="--fill:#777;--value:3.37"
    type="range"
    value="3.37">
</label>