简单的方法是使用重音色

CSS属性的作用是:为某些元素生成的用户界面控件设置强调色

支持重音颜色的浏览器目前将其应用于以下HTML元素:

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

一个可运行的示例

body { display: grid; padding: 3rem 0; } .accent { accent-color: #30cc7e; } form { display: grid; grid-auto-columns: fit-content(50%); grid-template-areas: "a a"; margin: auto; padding: 0; gap: 1rem; } form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: auto; } form section:first-child { color-scheme: light; } form section:last-child { color-scheme: dark; } fieldset { border-radius: 8px; color-scheme: light; display: flex; flex: 1; flex-direction: column; gap: 1rem; padding: 1rem; } .dark { color-scheme: dark; } .dark fieldset { background: #100f33; border-color: #100f33; color: #fff; } .dark .accent { accent-color: hsla(180, 100%, 70%, 1); } h2 { margin: 0; } .notice { background: #fff9c4; border-radius: 6px; margin: 1.5rem auto; padding: 0.5rem; text-align: center; } @supports (accent-color: #fff) { .notice { display: none; } } <div class="notice"> Your browser does not support the <code>accent-color</code> property. </div> <form action=""> <fieldset> <h2>Checkboxes</h2> <div> <label for="checkbox"> Default </label> <input id="checkbox" type="checkbox" checked> </div> <div> <label for="checkbox-accent"> Accent </label> <input id="checkbox-accent" type="checkbox" class="accent" checked> </div> </fieldset> <fieldset> <h2>Radio</h2> <div> <input id="radio" type="radio" checked> <label for="radio"> Default </label> </div> <div> <input id="radio-accent" type="radio" class="accent" checked> <label for="radio-accent"> Accent </label> </div> </fieldset> <fieldset> <h2>Progress</h2> <div> <label for="progress"> Default </label> <progress id="progress" min="0" max="100" value="50"></progress> </div> <div> <label for="progress-accent"> Accent </label> <progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress> </div> </fieldset> <fieldset> <h2>Range</h2> <div> <label for="range"> Default </label> <input id="range" type="range"> </div> <div> <label for="range-accent"> Accent </label> <input id="range-accent" class="accent" type="range"> </div> </fieldset> </form>

将单选按钮绑定到样式标签可能会有所帮助。进一步的细节在这个回答中。

正如其他人所说，没有办法在所有浏览器中实现这一点，所以跨浏览器实现这一点的最好方法是使用javascript。基本上你必须把你的单选按钮变成链接(完全可自定义通过CSS)。每次点击链接都将绑定到相关的单选框，切换他的状态和其他所有状态。

试试这样做:

#yes{ border:2px solid white; box-shadow:0 0 0 1px #392; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #yes:checked{ background-color:#392; } #no{ border:2px solid white; box-shadow:0 0 0 1px #932; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #no:checked{ background-color:#932; } <input id="yes" type="radio" name="s"><label for="yes">Yes</label></br> <input id="no" type="radio" name="s"><label for="no">No</label>

有更少的代码，它看起来更好，你不需要玩:之前，:之后和位置达到效果。

简单的跨浏览器自定义单选按钮的例子

.checkbox input{ display: none; } .checkbox input:checked + label{ color: #16B67F; } .checkbox input:checked + label i{ background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg'); } .checkbox label i{ width: 15px; height: 15px; display: inline-block; background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%; background-size: 12px; position: relative; top: 1px; left: -2px; } <div class="checkbox"> <input type="radio" name="sort" value="popularity" id="sort1"> <label for="sort1"> <i></i> <span>first</span> </label> <input type="radio" name="sort" value="price" id="sort2"> <label for="sort2"> <i></i> <span>second</span> </label> </div>

https://jsfiddle.net/kuzroman/ae1b34ay/

一个聪明的方法是创建一个单独的div，高度和宽度为-例如- 50px，然后半径为50px，将其放在单选按钮上…