HTML radio自定义美化样式。

来源：互联网发布：淘宝美工一般要做什么编辑：程序博客网时间：2024/06/08 09:21

自己写了个radio样式，根据项目需求写的。上传到博客，方便以后使用。
先贴css样式，样式不多，比较简单，易懂。

.radio_btn{            width: 30px;            height: 30px;            background: url(../images/dx.png) no-repeat;            background-size: cover;            display: inline-block;            /*background: orange;*/            border-radius:50%;            position: relative;            vertical-align: middle;        }        .radio_btn input{            width: 100%;            height: 100%;            position: absolute;            top: 0;            left: 0;            opacity: 0;            z-index: 100;        }        .radio_btn span{            background: url(../images/dx-.png) no-repeat;            background-size: cover;            width: 100%;            height: 100%;            display: inline-block;            position: absolute;            top: 0;            left: 0;            z-index: 1;            border-radius: 50%;        }        .radio_btn input[type=radio]+span{            opacity: 0;        }        .radio_btn input[type=radio]:checked+span{            opacity: 1;        }

HTML部分：

<div  class="radio_btn">            <input type="radio" name="sex" id="man" value="" checked="checked" />            <span></span>        </div>        <div  class="radio_btn">            <input type="radio" name="sex" id="male" value="" />            <span></span>        </div>

注意：图片是本地所有，可根据自己的需求来。可以定义成背景颜色来显示。

阅读全文

0 0