我的意思是,单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?
当前回答
您应该使用重音颜色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>
其他回答
如果你使用react bootstrap Form。你可以这样做
HTML
<Form.Check
type="radio"
id="Radio-card"
label={`check me out`}
name="paymentmethod"
value="card"
/>
SCSS
.form-check {
display: flex;
align-items: center;
input[type="radio"] {
-moz-appearance: none;
appearance: none;
width: 11px;
height: 11px;
padding: 1px;
background-clip: content-box;
border: 1px solid hotpink;
background-color: white;
border-radius: 50%;
}
input[type="radio"]:checked {
outline: none;
background-color: hotpink;
border: 1px solid hotpink;
}
label {
font-size: 14px;
font-weight: 600;
}
}
这在本地CSS中是不可能的。您必须使用背景图像和一些javascript技巧。
只有当你的目标是基于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;
}
一个聪明的方法是创建一个单独的div,高度和宽度为-例如- 50px,然后半径为50px,将其放在单选按钮上…
你可以像CSS技巧中解释的那样使用复选框
http://css-tricks.com/the-checkbox-hack/
单选按钮工作示例:
http://codepen.io/Angelata/pen/Eypnq
input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}
适用于IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome任何浏览器。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?