这在本地CSS中是不可能的。您必须使用背景图像和一些javascript技巧。

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

试试这样做:

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

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

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

.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方式实现自定义单选按钮

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>

简单来说，可以用重音色

查看页面来源

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input[type=radio] {
            accent-color: red;
        }
    </style>
</head>
<body>
    <label for="css">Are you like to css</label>
    <input type="radio" id="css" value="css">
</body>
</html>