更換按鈕的樣式

普通的按鈕比較難看,並且在一些頁面中顯得比較突兀,和整體不合羣,因此選擇更換按鈕的樣式。
開始以爲把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>

圖片自己選擇。我的樣式如下:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章