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

你可以像CSS技巧中解释的那样使用复选框

http://css-tricks.com/the-checkbox-hack/

单选按钮工作示例:

http://codepen.io/Angelata/pen/Eypnq

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

适用于IE9+， Firefox 3.5+， Safari 1.3+， Opera 6+， Chrome任何浏览器。

简单的方法是使用重音色

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>

如果你使用react bootstrap Form。你可以这样做

HTML

<Form.Check
type="radio"
id="Radio-card"
label={`check me out`}
name="paymentmethod"
value="card"
/>

SCSS

.form-check {
    display: flex;
    align-items: center;
    input[type="radio"] {
    -moz-appearance: none;
    appearance: none;
          
    width: 11px;
    height: 11px;
    padding: 1px;
    background-clip: content-box;
    border: 1px solid hotpink;
    background-color: white;
    border-radius: 50%;
    }
          
    input[type="radio"]:checked {
    outline: none;
    background-color: hotpink;
    border: 1px solid hotpink;
    }
    label {
    font-size: 14px;
    font-weight: 600;
    }
}

您应该使用重音颜色CSS属性，它为用户界面控件(如输入(单选按钮，复选框…)或进度条设置重音颜色，大多数现代浏览器都支持它。

input {
    accent-color: red;
}

document.querySelector("input[name=accent-color]").addEventListener("input", () => { document.documentElement.style.setProperty("--accent-color", event.target.value); }); :root { --accent-color: red; } input, progress { accent-color: var(--accent-color); } /* Other styles */ label { display: flex; align-items: center; gap: .625rem; margin-bottom: .625rem; } label:first-child { font-size: 1.15rem; font-weight: bold; } input { flex: 0 0 auto; height: 1.25rem; width: 1.25rem; } input[type="color"] { width: 3rem; } input[type="range"] { width: 12.5rem; } <label>Change the accent color<input name="accent-color" type="color" value="#ff0000"></input></label><br> <label><input name="radio" type="radio" checked></input>Radio button</label> <label><input name="radio" type="radio"></input>Another radio button</label> <label><input name="check" type="checkbox" checked></input>Checkbox</label> <label><input name="range" type="range"></input>Range input</label> <label><progress value="50" max="100"></progress>Progress bar</label>

这在本地CSS中是不可能的。您必须使用背景图像和一些javascript技巧。