​

<h1>accent-color</h1>

<section class="wrap default">

  <h2>默认控件样式</h2>

  <label>

    <input type="radio" name="menu_01"/>

    HTML

  </label>

  <label>

    <input type="radio" checked name="menu_01"/>

    CSS

  </label>

  <label>

    <input type="radio" name="menu_01"/>

    JavaScript

  </label>

  <label>

    <input type="radio" name="menu_01"/>

    Angular

  </label>

</section>

​

​

<section class="wrap setRed">

  <h2>设置accent-color为红色</h2>

  <label>

    <input type="radio" name="menu_02"/>

    HTML

  </label>

  <label>

    <input type="radio" name="menu_02"/>

    CSS

  </label>

  <label>

    <input type="radio" checked name="menu_02"/>

    JavaScript

  </label>

  <label>

    <input type="radio" name="menu_02"/>

    Angular

  </label>

</section>

​

<footer>

  <label>

    <input type="checkbox" checked/>

    我已了解（复选框设置：白色）！

  </label>

</footer>

*{

  box-sizing: border-box;

}

html,body {

  height: 100%;

}

body {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

}

h1,h2 {

  margin: 0;

  margin-bottom: 1em;

}

.wrap{

  width: 100%;

  margin: 0 auto;

  padding: 1.5em;

  border: 1px #ccc dashed;

  margin-bottom: 1.5em;

}

.default input[type="radio"]{

    accent-color: auto;

}

.setRed input[type="radio"]{

    accent-color: red;

}

footer input[type="checkbox"]{

  accent-color: white;

}