标签：
我在开发过程中需要用到一个按钮组，看了一眼bootstrap是用div+css实现的。当按下某一个按钮的时候，该按钮会按下，同时其他按钮弹起，问题是我没有发现这个按钮组成员的样式发生了变化。由于不知道这个没有js的按钮组用什么区分了按钮是否被按下，我决定自己使用单选框写一个。
但是此时就涉及到如何改变（隐藏）单选框前面那个圆圈的问题。
提供以下代码，可以在不满意html元素自带样式的时候进行自定义样式：
<label> <input type="radio" name=‘group‘ class="hidden-input" /> <span class="your style about checkbox">记住我</span> </label> <label> <input type="radio" name=‘group‘ class="hidden-input" /> <span class="your style about checkbox">记住我</span> </label> <label> <input type="radio" name=‘group‘ class="hidden-input" /> <span class="your style about checkbox">记住我</span> </label>
.hidden-input { opacity: 0; position: absolute; z-index: -1; } input[type=radio]+span { /* your style goes here */ display: inline-block; height: 40px; width: 100px; border-radius: 4px; text-align:center; line-height:40px; color:rgb(255,255,255); background-color: rgb(26, 188, 156); transition-duration: 0.25s; } /* active style goes here */ input[type=radio]:hover+span { background-color: rgb(47,226,191); } input[type=radio]:active+span { color: rgb(196,231,224); background-color: rgb(22,160,133); } input[type=radio]:checked+span { background-color: rgb(47,226,191); }
最后附上30个精炼CSS选择器：http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
标签：
原文地址：http://www.cnblogs.com/timl525/p/4739921.html
