Star

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rating Component</title>
    <!-- Подключение Font-Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <!-- Подключение CSS -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="rating">
        <input type="radio" name="clr" style="--c: #ff9933" />
        <input type="radio" name="clr" style="--c: #ff9933" />
        <input type="radio" name="clr" style="--c: #ff9933" />
        <input type="radio" name="clr" style="--c: #ff9933" />
        <input type="radio" name="clr" style="--c: #ff9933" />
        <input type="radio" name="clr" style="--c: #ff9933" />
        <input type="radio" name="clr" style="--c: #ff9933" />
        <input type="radio" name="clr" style="--c: #ff9933" />
        <input type="radio" name="clr" style="--c: #ff9933" />
        <input type="radio" name="clr" style="--c: #ff9933" />
      </div>
    </div>
  </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5; /* Светлый фон */
}

.rating {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
  padding: 30px 40px;
  border: 3px solid #ccc;
  border-radius: 30px;
  background-color: #fff;
  box-shadow:
    30px 30px 30px -10px rgba(0, 0, 0, 0.1),
    inset 15px 15px 3px rgba(255, 255, 255, 0.1),
    -4px -4px 15px rgba(255, 255, 255, 0.1),
    inset -2px -2px 12px rgba(0, 0, 0, 0.1);
}

.rating input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.rating input::before {
  content: "\f005";
  position: absolute;
  font-family: fontAwesome;
  font-size: 34px;
  color: #ccc;
  transition: 0.5s;
}

.rating input:hover ~ input::before,
.rating input:hover::before,
.rating input:checked ~ input::before,
.rating input:checked::before {
  color: var(--c);
}