html5 <input type='file' 样式修改

来源:互联网 发布:淘宝 手机 描述 模板 编辑:程序博客网 时间:2024/06/17 21:14

一直没有找到一个完美的修改 样式 , 比如说如何用图片代替丑陋的原声带按钮,现在找到一个号方法:

  1. 使用文字代替
<label class="ui_button ui_button_primary" for="xFile">上传文件</label><form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>
  1. 使用图片代替
<label class="ui_button ui_button_primary" for="xFile"><img src="./images/aaa.png"></label><form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

说明:
1.在 input type=’file’ , 定义一个id , 样式使得原生的按钮透明
2. 使用一个label , 这个label可以在form里面,也可以在form外面, label里面的内容可以是文字 , 也可以是图片

原创粉丝点击