只有当你的目标是基于webkit的浏览器(Chrome和Safari，也许你正在开发Chrome WebApp，谁知道…)，你可以使用以下:

input[type='radio'] {
   -webkit-appearance: none;
}

然后将其设置为一个简单的HTML元素，例如应用背景图像。

使用input[type='radio']:active用于选择输入时，提供备用图形

更新:截至2018年，您可以添加以下内容以支持多个浏览器供应商:

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

试试这样做:

#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>

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

您应该使用重音颜色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>

如果你使用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;
    }
}

一个快速的解决方法是使用:after覆盖单选按钮输入样式，但是创建自己的自定义工具包可能是一个更好的实践。

input[type='radio']:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #d1d3d1; content: ''; display: inline-block; visibility: visible; border: 2px solid white; } input[type='radio']:checked:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #ffa500; content: ''; display: inline-block; visibility: visible; border: 2px solid white; } <input type='radio' name="gender"/> <input type='radio' name="gender"/>

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

.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/