你可以使用CSS的重音颜色属性来改变颜色。

input[type='radio'] {
    accent-color: #232323;
}

它适用于Chrome/Edge 93+， Firefox 92+和Safari 15.4+(浏览器支持信息来自caniuse。)

你可以像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属性。

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}

我改变了单选按钮的颜色和大小。试试这个

.radio-tile-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .radio-tile-group .input-container { position: relative; margin: 0.9rem; } .radio-tile-group .input-container .radio-button { opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; cursor: pointer; } .radio-tile { border: 1px solid #eea236; } .radio-tile-group .input-container .radio-tile-edit { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25px; font-size: 12px; border-radius: 5px; padding: 0.2rem; transition: transform 300ms ease; height: 25px; } @media (min-width: 375px) and (max-width: 812px) { .radio-tile-group .input-container .radio-tile { margin-inline: 18px; } } .radio-tile-group .input-container .radio-button:checked+.radio-tile { border: 3px solid #2980b9; font-size: 12px; color: #797979; transform: scale(1.05, 1.05); } .radio-tile-group .input-container .radio-button:checked+.radio-tile .icon svg { fill: white; background-color: #2980b9; } .radio-tile-group .input-container .radio-button:checked+.radio-tile-edit { border: 3px solid black; /* font-size: 12px; */ color: #797979; transform: scale(1.05, 1.05); } <label>Radio button colors:</label> <br> <div class="radio-tile-group"> <div class="input-container"> <label class="radio-tile-label" style="background-color: #b60205;border-radius: 5px;"> <input type="radio" value="#b60205" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #b60205;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #d93f0b; border-radius: 5px;"> <input type="radio" value="#d93f0b" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #d93f0b;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #fbca04; border-radius: 5px;"> <input type="radio" value="#fbca04" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #fbca04;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #0e8a16; border-radius: 5px;"> <input type="radio" value="#0e8a16" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #0e8a16;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #006b75; border-radius: 5px;"> <input type="radio" value="#006b75" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color:#006b75"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #1d76db; border-radius: 5px;"> <input type="radio" value="#1d76db" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #1d76db;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #0052cc; border-radius: 5px;"> <input type="radio" value="#0052cc" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #0052cc;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #757575; border-radius: 5px;"> <input type="radio" value="#757575" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #757575;"> </label> </div> </div> </div>

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

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

试试这样做:

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

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