更换按钮的样式

最新推荐文章于 2021-12-08 12:13:08 发布

小田同學

最新推荐文章于 2021-12-08 12:13:08 发布

阅读量779

点赞数

分类专栏： CSS 文章标签： button css 样式

本文链接：https://blog.csdn.net/Sabrina_TSM/article/details/51354253

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

普通的按钮比较难看，并且在一些页面中显得比较突兀，和整体不合群，因此选择更换按钮的样式。
开始以为把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>

图片自己选择。我的样式如下：
这里写图片描述

小田同學

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
更换按钮的样式

普通的按钮比较难看，并且在一些页面中显得比较突兀，和整体不合群，因此选择更换按钮的样式。开始以为把button先display:none，然后在label上写样式就可以了，结果发现并不能得到自己想要的结果。代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title>
复制链接

扫一扫

专栏目录