如何更改单选按钮的颜色?

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

当前回答

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

2018-11-21 18:58:24

其他回答

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

2013-03-02 12:27:46

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

2010-11-23 08:11:33

简单来说，可以用重音色

查看页面来源

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

2022-04-23 15:36:47

简单的跨浏览器自定义单选按钮的例子

.checkbox input{ display: none; } .checkbox input:checked + label{ color: #16B67F; } .checkbox input:checked + label i{ background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg'); } .checkbox label i{ width: 15px; height: 15px; display: inline-block; background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%; background-size: 12px; position: relative; top: 1px; left: -2px; } <div class="checkbox"> <input type="radio" name="sort" value="popularity" id="sort1"> <label for="sort1"> <i></i> <span>first</span> </label> <input type="radio" name="sort" value="price" id="sort2"> <label for="sort2"> <i></i> <span>second</span> </label> </div>

https://jsfiddle.net/kuzroman/ae1b34ay/

2017-08-22 09:25:31

您应该使用重音颜色CSS属性，它为用户界面控件(如输入(单选按钮，复选框…)或进度条设置重音颜色，大多数现代浏览器都支持它。

input {
    accent-color: red;
}

2022-02-03 09:36:19

如何更改单选按钮的颜色?

推荐文章

最新文章

标签