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

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

当前回答

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

2018-11-21 18:58:24

其他回答

对于我的使用，我想做的只是改变颜色，没有其他，所以我已经从@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; }

2021-03-22 17:35:05

正如其他人所说，没有办法在所有浏览器中实现这一点，所以跨浏览器实现这一点的最好方法是使用javascript。基本上你必须把你的单选按钮变成链接(完全可自定义通过CSS)。每次点击链接都将绑定到相关的单选框，切换他的状态和其他所有状态。

2010-11-23 08:25:59

简单来说，可以用重音色

查看页面来源

<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

简单的方法是使用重音色

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>

2022-02-23 22:14:29

一个简单的修复方法是使用以下CSS属性。

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}

2019-06-11 19:52:01

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

推荐文章

最新文章

标签