<div class="form">
  <h1>Questionnaire survey</h1>
  <form>
    <div class="control">
      <label for="browser">Please choose your preferred browser from the list:</label>
      <select id="browsers">
        <option value="Edge">Edge</option>
        <option value="Firefox">Firefox</option>
        <option value="Chrome">Chrome</option>
        <option value="Opera">Opera</option>
        <option value="Safari">Safari</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <div class="control control--other">
      <label for="feedback">Share your feedback:</label>
      <input type="text" name="feedback" id="feedback" />
    </div>
    <div class="control">
      <button type="submit">Submit</button>
    </div>
  </form>
</div>
<div class="form">
  <h1>Questionnaire survey</h1>
  <form>
    <div class="control control--radios">
      <span>Please choose your preferred browser from the list:</span>
      <label for="edge">
        <input type="radio" id="edge" name="browsers" /> Edge
      </label>
      <label for="firefox">
        <input type="radio" id="firefox" name="browsers" /> Firefox
      </label>
      <label for="chrome">
        <input type="radio" id="chrome" name="browsers" /> Chrome
      </label>
      <label for="opera">
        <input type="radio" id="opera" name="browsers" /> Opera
      </label>
      <label for="safari">
        <input type="radio" id="safari" name="browsers" /> Safari
      </label>
      <label for="other">
        <input type="radio" id="other" name="browsers" /> Other
      </label>
    </div>
    <div class="control control--other">
      <label for="feedback2">Share your feedback:</label>
      <input type="text" name="feedback" id="feedback2" />
    </div>
    <div class="control">
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

<div class="alert">
  <p>您的浏览器暂时还不支持CSS的<code>:has</code>选择器。请使用 Safari 15.4 或 Chrome Canary 最新版本查看(^_^)!</p>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

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

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 80px 20px 20px;
}

.form {
  width: min(100%, 36vw);
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(
      ellipse closest-side at 0 0,
      rgba(104, 128, 138, 0.4) 10%,
      rgba(138, 114, 76, 0) 40%
    ),
    linear-gradient(
      to bottom,
      rgba(57, 173, 219, 0.25) 0%,
      rgba(42, 60, 87, 0.4) 100%
    ),
    linear-gradient(135deg, #670d10 0%, #092756 100%);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgb(0 0 0 / 60%);
  border-radius: 10px;
  color: #fff;
}

.form h1 {
  margin: 0 0 1em;
  font-size: 1.8em;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.control label,
.control span {
  display: block;
  margin-bottom: 0.5em;
  color: #d6efed;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
  font-size: 0.865em;
}

form input[type="text"],
form select {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  outline: none;
  padding: 10px;
  font-size: 13px;
  color: #fff;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  box-shadow: inset 0 -5px 45px rgb(100 100 100 / 20%),
    0 1px 1px rgb(255 255 255 / 20%);
  transition: box-shadow 0.5s ease;
}

form input[type="text"]:focus {
  box-shadow: inset 0 -5px 45px rgb(100 100 100 / 40%),
    0 1px 1px rgb(255 255 255 / 20%);
}

.control--radios label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0.25em;
  position: relative;
  line-height: 1;
}

.control--radios label + label {
  margin-top: 1em;
}

input[type="radio"] {
  height: 1px;
  overflow: hidden;
  width: 1px;
  position: absolute;
  clip-path: inset(50%);
}

.control--radios label::before {
  content: "";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #c5c5c5;
  background: #fff;
  color: #c5c5c5;
  width: 16px;
  aspect-ratio: 1;
  transition: all 0.2s ease;
}

label:has(input[type="radio"]:checked) {
  color: #9739e8;
}

label:has(input[type="radio"]:checked)::before {
  content: "✔";
  border-color: #9739e8;
  background-color: #9739e8;
  color: #fff;
  font-size: 0.625em;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

button {
  --d: 2500ms;
  --angle: 90deg;
  --gradX: 100%;
  --gradY: 50%;
  --c1: rgb(225 207 43);
  --c2: rgb(223 214 47 / 10%);
  font-family: "Exo", Arial, sans-serif;
  font-size: 1.25em;
  border: 4px solid;
  padding: 0.365em 1.25em;
  border-image: conic-gradient(
      from var(--angle),
      var(--c2),
      var(--c1) 0.1turn,
      var(--c1) 0.15turn,
      var(--c2) 0.25turn
    )
    4;
  animation: borderRadial var(--d) linear infinite forwards,
    borderRotate var(--d) linear infinite forwards;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 50%);
  background: #4a77d4 linear-gradient(to top, #6eb6de, #4a77d4) repeat-x;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

@keyframes borderRotate {
  100% {
    --angle: 420deg;
  }
}

@keyframes borderRadial {
  20% {
    --gradX: 100%;
    --gradY: 50%;
  }
  40% {
    --gradX: 100%;
    --gradY: 100%;
  }
  60% {
    --gradX: 50%;
    --gradY: 100%;
  }
  80% {
    --gradX: 0%;
    --gradY: 50%;
  }
  100% {
    --gradX: 50%;
    --gradY: 0%;
  }
}

.control--other {
  display: none;
}

form:has(option[value="Other"]:checked) .control--other,
form:has(input[type="radio"][id="other"]:checked) .control--other {
  display: block;
}

.alert {
  display: flex;
  justify-content: center;
  position: fixed;
  padding: 1rem;
  background-color: #ffeeee;
  font-size: 0.75rem;
  top: 0;
  left: 0;
  right: 0;
  color: red;
}

.alert code {
  display: inline-flex;
  padding: 0.25em 0.5em;
  font-weight: bold;
  background-color: #3f51b5;
  color: #fff;
  border-radius: 3px;
  margin: 0 5px;
}

@supports selector(:has(works)) {
  .alert {
    display: none;
  }
  body {
    padding: 20px;
  }
}