利用CSS修改表单中单选按钮的样式_css按钮就类型为radio点击后怎么样式不改变

一个很好的博文：改变单选按钮radio的默认样式

里面有演示例子的网页链接和效果图，还有代码，总体很好，摘过来学习一下，顺便记录学习体会。

我把上面博文中的例子按照我需要的样式进行了修改，并放入到我任务的代码中，实现了样式的改变，如图：

但点击时却发现按钮样式毫无变化，甚至是没反应。

对比Demo中的例子研究了很久，找到了原因：

我一开始写的代码如下：

<label class="radio" for="problem-type">
	<div><input type="radio" name="problem-type" value="1" class="radio-type"><i></i><span>宕机、卡、慢</span></div>
</label>
<label class="radio" for="problem-type">
	<div><input type="radio" name="problem-type" value="2" class="radio-type"><i></i><span>数据源取数</span></div>
</label>
<label class="radio" for="problem-type">
	<div><input type="radio" name="problem-type" value="3" class="radio-type"><i></i><span>模板制作类</span></div>
</label>

我在<label>标签中，按照学习的知识，写上了for="..."，用来表示这个label是为哪组单选按钮设定的。但后来经过对比发现，不需要加上这个for属性，也可以实现这组单选按钮，因为input标签的name属性已经设定了相同的值。

去掉label标签的for属性之后，页面的单选按钮即可正常点击并实现预期效果了。实现如下图：