我的意思是,单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?
当前回答
简单来说,可以用重音色
查看页面来源
<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方式实现自定义单选按钮
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>
一个聪明的方法是创建一个单独的div,高度和宽度为-例如- 50px,然后半径为50px,将其放在单选按钮上…
我构建了@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
这在本地CSS中是不可能的。您必须使用背景图像和一些javascript技巧。
您可以使用css中的重音颜色属性来更改复选框和单选按钮的背景颜色。
input[type=radio] {
accent-color: red;
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?