我的意思是,单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?
当前回答
您可以使用css中的重音颜色属性来更改复选框和单选按钮的背景颜色。
input[type=radio] {
accent-color: red;
}
其他回答
您可以通过两种纯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>
只有当你的目标是基于webkit的浏览器(Chrome和Safari,也许你正在开发Chrome WebApp,谁知道…),你可以使用以下:
input[type='radio'] {
-webkit-appearance: none;
}
然后将其设置为一个简单的HTML元素,例如应用背景图像。
使用input[type='radio']:active用于选择输入时,提供备用图形
更新:截至2018年,您可以添加以下内容以支持多个浏览器供应商:
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
您应该使用重音颜色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>
简单来说,可以用重音色
查看页面来源
<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属性。
input[type=radio]:checked{
background: \*colour*\;
border-radius: 15px;
border: 4px solid #dfdfdf;
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?