这对我很有效，

简单添加css属性:

输入(type = "电台"]{强调色:红色;}

这里是资源链接

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

简单的方法是使用重音色

CSS属性的作用是:为某些元素生成的用户界面控件设置强调色

支持重音颜色的浏览器目前将其应用于以下HTML元素:

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

一个可运行的示例

body { display: grid; padding: 3rem 0; } .accent { accent-color: #30cc7e; } form { display: grid; grid-auto-columns: fit-content(50%); grid-template-areas: "a a"; margin: auto; padding: 0; gap: 1rem; } form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: auto; } form section:first-child { color-scheme: light; } form section:last-child { color-scheme: dark; } fieldset { border-radius: 8px; color-scheme: light; display: flex; flex: 1; flex-direction: column; gap: 1rem; padding: 1rem; } .dark { color-scheme: dark; } .dark fieldset { background: #100f33; border-color: #100f33; color: #fff; } .dark .accent { accent-color: hsla(180, 100%, 70%, 1); } h2 { margin: 0; } .notice { background: #fff9c4; border-radius: 6px; margin: 1.5rem auto; padding: 0.5rem; text-align: center; } @supports (accent-color: #fff) { .notice { display: none; } } <div class="notice"> Your browser does not support the <code>accent-color</code> property. </div> <form action=""> <fieldset> <h2>Checkboxes</h2> <div> <label for="checkbox"> Default </label> <input id="checkbox" type="checkbox" checked> </div> <div> <label for="checkbox-accent"> Accent </label> <input id="checkbox-accent" type="checkbox" class="accent" checked> </div> </fieldset> <fieldset> <h2>Radio</h2> <div> <input id="radio" type="radio" checked> <label for="radio"> Default </label> </div> <div> <input id="radio-accent" type="radio" class="accent" checked> <label for="radio-accent"> Accent </label> </div> </fieldset> <fieldset> <h2>Progress</h2> <div> <label for="progress"> Default </label> <progress id="progress" min="0" max="100" value="50"></progress> </div> <div> <label for="progress-accent"> Accent </label> <progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress> </div> </fieldset> <fieldset> <h2>Range</h2> <div> <label for="range"> Default </label> <input id="range" type="range"> </div> <div> <label for="range-accent"> Accent </label> <input id="range-accent" class="accent" type="range"> </div> </fieldset> </form>

正如Fred提到的，没有办法在颜色、大小等方面对单选按钮进行本地样式设置。但是您可以使用CSS Pseudo元素来设置任意给定单选按钮的冒名顶替者，并对其进行样式化。谈到JamieD所说的，关于我们如何使用:after Pseudo元素，您可以同时使用:before和:after来实现理想的外观。

这种方法的好处:

Style your radio button and also Include a label for content. Change the outer rim color and/or checked circle to any color you like. Give it a transparent look with modifications to background color property and/or optional use of the opacity property. Scale the size of your radio button. Add various drop shadow properties such as CSS drop shadow inset where needed. Blend this simple CSS/HTML trick into various Grid systems, such as Bootstrap 3.3.6, so it matches the rest of your Bootstrap components visually.

简短演示说明如下:

Set up a relative in-line block for each radio button Hide the native radio button sense there is no way to style it directly. Style and align the label Rebuilding CSS content on the :before Pseudo-element to do 2 things - style the outer rim of the radio button and set element to appear first (left of label content). You can learn basic steps on Pseudo-elements here - http://www.w3schools.com/css/css_pseudo_elements.asp If the radio button is checked, request for label to display CSS content (the styled dot in the radio button) afterwards.

HTML

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

一个简短的演示，看看它的行动

总之，不需要JavaScript，图像或电池。纯CSS。