我正在尝试添加< input type =“reset”>带有Font Awesome图标.
我可以通过超链接或按钮来实现这一点,但如果我沿着那条路走下去,我需要使用jQuery / JS来清除表单,我暂时想避免使用它.
我很想知道是否有可能取得同样的结果.请参阅JSFiddle以了解我的意思.
Input Reset: <input type="reset" class="btn btn-warning" value=""><i class="fa fa-times"></i> Clear</input> <br/> <br/> Button: <button class="btn btn-warning"><i class="fa fa-times"></i> Clear</button> <br/> <br/> Anchor: <a href="#" class="btn btn-warning"><i class="fa fa-times"></i> Clear</a>
解决方法
<输入>是自动关闭标签,不允许在其中包含任何其他元素.
以下是将其作为内联图标的所有3种可能选项.
1.包裹< i>和<输入>按钮进入< span>标签,带有一些自定义样式.
<span class="btn btn-warning">
<i class="fa fa-times"></i> <input type="reset" value="Clear"/>
</span>
span > i {
color: white;
}
span > input {
background: none;
color: white;
padding: 0;
border: 0;
}
2.使用< button type =“reset”> – 推荐的.
<button class="btn btn-warning" type="reset">
<i class="fa fa-times"></i> Clear
</button>
3.使用< a>锚标记javascript
<a href="javascript:document.getElementById('myform').reset();" class="btn btn-warning">
<i class="fa fa-times"></i> Clear
</a>
