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

对于那些喜欢从最小示例开始开发的人来说，这里有一个简单的自定义单选按钮，它不依赖于标签:

[type="radio"] { visibility: hidden; /* hide default radio button */ /* you may need to adjust margin here, too */ } [type="radio"]::before { /* create pseudoelement */ border: 2px solid gray; /* thickness, style, color */ height: .9em; /* height adjusts with font */ width: .9em; /* width adjusts with font */ border-radius: 50%; /* make it round */ display: block; /* or flex or inline-block */ content: " "; /* won't display without this */ cursor: pointer; /* appears clickable to mouse users */ visibility: visible; /* reverse the 'hidden' above */ } [type="radio"]:checked::before { /* selected */ /* add middle dot when selected */ /* slightly bigger second value makes it smooth */ /* even more (e.g., 20% 50%) would make it fuzzy */ background: radial-gradient(gray 36%, transparent 38%); } <br> <input type="radio" name="example" id="one" value="one"> <label for="one">one</label> <br> <br> <input type="radio" name="example" id="two" value="two"> <label for="two">two</label>

只有当你的目标是基于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;
}

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

您可以使用css中的重音颜色属性来更改复选框和单选按钮的背景颜色。

input[type=radio] {
  accent-color: red;
}

你可以像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任何浏览器。