我的意思是,单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?
当前回答
为了创建额外的元素,我们可以使用:after,:before(所以我们不需要对HTML进行太多的更改)。对于单选按钮和复选框,我们可以使用:checked。我们还可以使用其他一些伪元素(例如:hover)。使用这些组合,我们可以创建一些非常酷的自定义表单。检查这个
其他回答
正如其他人所说,没有办法在所有浏览器中实现这一点,所以跨浏览器实现这一点的最好方法是使用javascript。基本上你必须把你的单选按钮变成链接(完全可自定义通过CSS)。每次点击链接都将绑定到相关的单选框,切换他的状态和其他所有状态。
这在本地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>
简单的跨浏览器自定义单选按钮的例子
.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/
你可以像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?