html单选按钮样式 正方形,Html单选按钮自定义样式

前言：

某天，写了一个带有单选按钮的界面，突然想起网上其他网站各种各样的单选按钮，遂想“改下这个圆圈圈怎么样？”，于是在找了一遍单选按钮的样式，没一个说是修改圆圈圈，于是又去网上找了一遍，各种各样，自己选了其中一种并稍加修改，感觉简单通俗易懂，而且最重要的是效果好，故在此和大家分享一下。

原理：

之前已经提及，html的单选按钮没有提供一个样式能修改其圆圈，所以仅靠一句类似“color:#fff”的语句是不可能的，不过考虑：

(A)html每个input都可以加一个label，点击label，也会出发input的点击：

是否

(B)label标签可以加背景，并通过其他样式，让背景显示在文字的左边：

是否

(C)input标签可以隐藏：

是否

(D)点击label后，可以通过JS，修改其背景图片:

(此处为图片)

看到这里有没有恍然大悟，什么自定义单选按钮的图标，不过是把单选按钮隐藏了，然后通过每次点击修改label的背景图片，达到自定义的效果，而且后期需要把单选按钮的图标换成花花草草猫猫狗狗，也不过是换下图片而已。如果还不能实现࿰