我的意思是,单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?
当前回答
试试这样做:
#yes{ border:2px solid white; box-shadow:0 0 0 1px #392; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #yes:checked{ background-color:#392; } #no{ border:2px solid white; box-shadow:0 0 0 1px #932; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #no:checked{ background-color:#932; } <input id="yes" type="radio" name="s"><label for="yes">Yes</label></br> <input id="no" type="radio" name="s"><label for="no">No</label>
有更少的代码,它看起来更好,你不需要玩:之前,:之后和位置达到效果。
其他回答
你可以使用CSS的重音颜色属性来改变颜色。
input[type='radio'] {
accent-color: #232323;
}
它适用于Chrome/Edge 93+, Firefox 92+和Safari 15.4+(浏览器支持信息来自caniuse。)
正如其他人所说,没有办法在所有浏览器中实现这一点,所以跨浏览器实现这一点的最好方法是使用javascript。基本上你必须把你的单选按钮变成链接(完全可自定义通过CSS)。每次点击链接都将绑定到相关的单选框,切换他的状态和其他所有状态。
单选按钮是特定于每个操作系统/浏览器的原生元素。没有办法改变它的颜色/风格,除非你想实现自定义图像或使用自定义Javascript库,其中包括图像(例如这个-缓存链接)
简单来说,可以用重音色
查看页面来源
<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>
对于我的使用,我想做的只是改变颜色,没有其他,所以我已经从@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; }
`
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?