CodePen Embed - css-accent-color

<header>
  <h1>🍅 <b>토마토</b> 양식</h1>
</header>

<section>
  <label>
    <input type="radio" name="contact" value="email" checked />
    <span>이메일</span>
  </label>
</section>

<section>
  <fieldset>
    <label>
      <input type="checkbox" name="contact" value="email" checked />
      <span>이메일</span>
    </label>

    <label>
      <input type="checkbox" name="contact" value="phone" />
      <span>전화</span>
    </label>
  </fieldset>
</section>

<section>
  <label><span>온도</span> <input type="range" name="temperature" value="30"></label>
</section>

<section>
  <div aria-busy="true" aria-describedby="progress-bar">
    <!-- 로딩 중 ... -->
  </div>
  <progress id="progress-bar" aria-label="Content loading…"></progress>
 </section>

:root {
  --brand: tomato;
  accent-color: var(--brand);
}

b {
  color: var(--brand);
}

progress {
  height: 30px;
}

span {
  font-size: 1.2em;
  vertical-align: middle;
}

fieldset {
  display: flex;
  gap: 1em;
  border: none;
  margin: 0;
  padding: 0;
}

header {
  padding: 8px 16px;
}

section {
  padding: 8px 16px;
}

This Pen is owned by Dale Seo on CodePen.

See more by @daleseo on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.