我的意思是,单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?


当前回答

为了创建额外的元素,我们可以使用:after,:before(所以我们不需要对HTML进行太多的更改)。对于单选按钮和复选框,我们可以使用:checked。我们还可以使用其他一些伪元素(例如:hover)。使用这些组合,我们可以创建一些非常酷的自定义表单。检查这个

其他回答

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

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

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

简单来说,可以用重音色

查看页面来源

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

这对我很有效,

简单添加css属性:

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

这里是资源链接

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

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