input 属性 title----样式自定义

新发现：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框架页面正常，其他框架没测试过)，某种程度上减少了代码

欢迎评论交流，希望有更好的方法或者大神指导