新发现:input 的title属性可以当成html来写
直接上栗子
<div >
<input type="radio" name="month" value="1" title="一个月" checked>
<input type="radio" name="month" value="3" title="三个月(9.5折)">
<input type="radio" name="month" value="6" title="半年(8.8折)">
<input type="radio" name="month" value="12" title="一年(6.6折)">
</div>
效果:
但是客户提出想要这个效果:
按照一般情况我们会这样做:
将title的内容,即单选按钮后的文字,放在div中再将 9.5折 或需要其他样式的内容放在<i>或<span>标签中给其设置样式;
<style type="text/css">
.x-hui{
color: #666;}
</style>
<div >
三个月
<i class="x-hui">9.5折</i>
</div>
但是这么做让我一个懒人如何是好,换种思维,titile属性值能不能以html的方式来写:
<style type="text/css">
.x-hui{
color: #666;
margin-left:10px;
}
</style>
<div>
<input type="radio" name="month" value="1" title="一个月" checked>
<input type="radio" name="month" value="3" title="三个月<i class=x-hui> 9.5折 </i>">
<input type="radio" name="month" value="6" title="半年<i class=x-hui> 8.8折 </i>">
<input type="radio" name="month" value="12" title="一年<i class=x-hui>6.6折</i>">
</div>
这样便可以了,完美满足要求
需要注意的是: class= 不需要用" " 括起来;
且 title 样式可自定义,如果引用了ui框架也不会干扰(用layui框架页面正常,其他框架没测试过),某种程度上减少了代码
欢迎评论交流,希望有更好的方法或者大神指导