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

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

您可以通过两种纯CSS方式实现自定义单选按钮

Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE. Demo: input[type="radio"] { /* remove standard background appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ .flex { display: flex; align-items: center; } <div class="flex"> <input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label> </div> Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here (I see absolute positioning in most demos). Demo: *, *:before, *:after { box-sizing: border-box; } input[type="radio"] { display: none; } input[type="radio"]+label:before { content: ""; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; margin-right: 3px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked + label:before { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ label { display: flex; align-items: center; } <input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label>

试试这样做:

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

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

为了创建额外的元素，我们可以使用:after，:before(所以我们不需要对HTML进行太多的更改)。对于单选按钮和复选框，我们可以使用:checked。我们还可以使用其他一些伪元素(例如:hover)。使用这些组合，我们可以创建一些非常酷的自定义表单。检查这个

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

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