发表于： 2016-06-19 18:38:36
1 1316
关于添加单选按钮样式的方法。（添加背景图片）。
html文件
<body>
<div class="wrap">
<h4>radio</h4>
<div class="single">
<input type="radio" class="radio-logo" id=r1 name="radio" value="option1"/>
<label for="r1"> the one </label>
</div>
<div class="single">
<input type="radio" class="radio-logo" id=r2 name="radio" value="option2"/>
<label for="r2"> the two </label>
</div>
</div>
</body>
*********************************************************************************************css
<style>
.single{
height:30px;
font-size:18px;
border:1px solid red;
color:blue;
}
.radio-logo{
position:absolute;
display:none;
}//弃掉默认样式并左对齐。
.radio-logo+label{
position:relative;
padding-left:30px;
vertical-align:middle;
}
.radio-logo+label::before{
position:absolute;
top:0;
left:0;
width:20px;
height:20px;
content:url(https://github.com/sizee/Custom-box/blob/master/%E5%AE%9A%E5%88%B6%E7%AE%B1---circle.png);
border:1px solid red;
}
.radio-logo:checked+label::before{
content:url(https://github.com/sizee/Custom-box/blob/master/%E5%AE%9A%E5%88%B6%E7%AE%B1---circleblue.png);
}
</style>
*********************************************************************************************
把代码放入自己的html文件中注意空格以及图片的地址。可以用自己的图片。这里的图片地址有可能加载不出来。
本显示是垂直排列的，如过想水平排列，可以在single里面加上“display:inline-block;”或弄个左右浮动。
如过不用背景图片 也可在相应得类中取消图片换成自己绘制的图形。
返回列表
评论