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

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

试试这个带有过渡的css:

Demo

$DarkBrown: #292321;

$Orange: #CC3300;

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

Html:

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

一个简单的修复方法是使用以下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中的重音颜色属性来更改复选框和单选按钮的背景颜色。

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

您应该使用重音颜色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>