普通的按鈕比較難看,並且在一些頁面中顯得比較突兀,和整體不合羣,因此選擇更換按鈕的樣式。
開始以爲把button先display:none,然後在label上寫樣式就可以了,結果發現並不能得到自己想要的結果。
代碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[type='radio'].radio {opacity:0; display:inline-block; height:22px; }
label.radio {background:url(image/3.png) no-repeat; height:22px; padding-left:25px;}
input[type='radio'].radio:checked + .radio {background:url(image/4.png) no-repeat;}
</style>
</head>
<body>
<input type="radio" name="sex" id="a" value="X" class="radio"><label for="a" class="radio">我要保密</label><br>
<input type="radio" name="sex" id="b" value="M" class="radio"><label for="b" class="radio" >我是帥哥</label><br>
<input type="radio" name="sex" id="c" value="F" class="radio"><label for="c" class="radio" >我是美女</label><br>
</body>
</html>
圖片自己選擇。我的樣式如下: