一个简单的修复方法是使用以下CSS属性。

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

对于我的使用，我想做的只是改变颜色，没有其他，所以我已经从@klewis的答案，并将其更改为…

使收音机与浏览器默认(在我的情况下是Chrome)相同，使用相对%和em而不是固定的px。注意:em基于输入[type=radio]的字体大小，这可以被继承。可能需要对下面的值进行调整。 保留原始单选按钮的辅助功能(如聚焦时的轮廓)，不使用display: none;并将:before和:after应用于原收音机而不是标签。

/* make default radio 'invisible' */ input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* make new radio outer circle */ input[type=radio]:before { content: " "; display: inline-block; position: relative; width: 0.8em; height: 0.8em; border-radius: 50%; border: 1px solid grey; background-color: transparent; } /* change colour of radio outer circle when checked */ input[type=radio]:checked:before { border-color: green; } /* make new radio inner circle when checked */ input[type=radio]:checked:after { content: " "; display: block; position: absolute; width: 0.55em; height: 0.55em; border-radius: 50%; top: 0.4em; left: 0.13em; background: green; }

`

您可以通过两种纯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>

单选按钮是特定于每个操作系统/浏览器的原生元素。没有办法改变它的颜色/风格，除非你想实现自定义图像或使用自定义Javascript库，其中包括图像(例如这个-缓存链接)

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

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

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