我的意思是,单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?
当前回答
您可以使用css中的重音颜色属性来更改复选框和单选按钮的背景颜色。
input[type=radio] {
accent-color: red;
}
其他回答
你可以使用CSS的重音颜色属性来改变颜色。
input[type='radio'] {
accent-color: #232323;
}
它适用于Chrome/Edge 93+, Firefox 92+和Safari 15.4+(浏览器支持信息来自caniuse。)
单选按钮是特定于每个操作系统/浏览器的原生元素。没有办法改变它的颜色/风格,除非你想实现自定义图像或使用自定义Javascript库,其中包括图像(例如这个-缓存链接)
一个快速的解决方法是使用:after覆盖单选按钮输入样式,但是创建自己的自定义工具包可能是一个更好的实践。
input[type='radio']:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #d1d3d1; content: ''; display: inline-block; visibility: visible; border: 2px solid white; } input[type='radio']:checked:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #ffa500; content: ''; display: inline-block; visibility: visible; border: 2px solid white; } <input type='radio' name="gender"/> <input type='radio' name="gender"/>
我构建了@klewis的代码样本的另一个分支,通过使用:before/:after伪元素和隐藏的单选输入按钮来演示纯css和渐变。
HTML:
sample radio buttons:
<div style="background:lightgrey;">
<span class="radio-item">
<input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
<label for="ritema">True</label>
</span>
<span class="radio-item">
<input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
<label for="ritemb">False</label>
</span>
</div>
:
CSS:
.radio-item input[type='radio'] {
visibility: hidden;
width: 20px;
height: 20px;
margin: 0 5px 0 5px;
padding: 0;
}
.radio-item input[type=radio]:before {
position: relative;
margin: 4px -25px -4px 0;
display: inline-block;
visibility: visible;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px inset rgba(150,150,150,0.75);
background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
content: "";
}
.radio-item input[type=radio]:checked:after {
position: relative;
top: 0;
left: 9px;
display: inline-block;
visibility: visible;
border-radius: 6px;
width: 12px;
height: 12px;
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
content: "";
}
.radio-item input[type=radio].true:checked:after {
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
}
.radio-item input[type=radio].false:checked:after {
background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
}
.radio-item label {
display: inline-block;
height: 25px;
line-height: 25px;
margin: 0;
padding: 0;
}
预览: https://www.codeply.com/p/y47T4ylfib
简单的跨浏览器自定义单选按钮的例子
.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/
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?