在工作中时常会遇到如需要上传功能的按钮，而不像需要系统默认的样式时候，可以采取以下的解决方案：

<img onclick="getElementById('file').click()" style="cursor:pointer;" title="点击添加图片" alt="点击添加图片" src="sc.png"><!--用来替换按钮的图片
-->
 <input type="file" multiple="multiple" id="file" name='file' style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/><!--原来按钮的样式-->

便可轻松的解决问题

关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案的更多相关文章

  1. html中input type=file 改变样式

    <style> #uploadImg{ font-size:12px; overflow:hidden; position:absolute} #file{ position:absolu ...

  2. 谷歌游览器对<input type='file'> change只能响应1次解决和样式的改变

    在项目过程中遇到的需要上传本地文件,file的原始控件不太美观,但是这个控件和button有点不太一样, 改变这个样式的思路就是在控件外面套一层链接,然后把file控件的透明度设置为0(透明).样式只 ...

  3. vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]

    今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...

  4. 改变input type="file" 文字、样式等

    <div class="tac"> <input type="file" id="browsefile" class=&q ...

  5. html的文件控件<input type="file">样式的改变

    一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...

  6. 原来样式改变不了（input type="file"）

    label { background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: ...

  7. 改变input[type=file]的默认样式

    自定义上传按钮样式的终极解决方案--input透明法 <style> .div1{ float: left; height: 41px; background: #f5696c; widt ...

  8. html中，文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  9. 用jQuery重置用于文件上传的input (type="file")

    页面中有如下标签: <input type="file" id="upload"/> 此标签本用于文件上传,现在有需要将其值重置为空.于是想当然地写 ...

随机推荐

  1. HDU 3127 WHUgirls dp背包问题

    WHUgirls Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total ...

  2. The Event System

    The Event System 在Qt中,事件是继承了虚拟类QEvent的对象,它代表了程序所发生的事情或者程序需要知道的一个外部活动的结果.事件可以被任意 QObject子类的实例接收和处理,是与 ...

  3. classnull100 - The 3n + 1 problem

    新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正  The 3n + 1 problem  Background Problems in Computer Science are o ...

  4. 你可能把A/B测试做错了

    大卫奥格威说过,"永远不要停止试验,你的广告也就永远不会停止改进". 在当今的网络世界中,类似于吆喝科技 AppAdhoc A/B Testing 这样的工具越来越多,AB测试和转 ...

  5. Node.js中读取文件后用Json.parse方法报错

    今天,在调试一个node项目时,发现了一个很大的坑,在此分享给大家! 大家都知道,Json.parse()方法对格式要求是很严格的,格式不对极其容易报错,但是有时候格式看似是正确的也会报错. 比如这一 ...

  6. USACO 3.3 Camelot

    CamelotIOI 98 Centuries ago, King Arthur and the Knights of the Round Table used to meet every year ...

  7. 20170114 - Mac 向上一级文件夹快捷键

    以前使用XtraFinder来实现向上跳转文件夹,Mac其实自带的向上一级文件夹,只是没有那么明显, Mac下跳转上一级文件夹的快捷键是 Command + Up Arrow,即: ⌘ ↑

  8. 常见sql语句

    1.去最新插入表数据与当前时间差额 select  *,(TIME_TO_SEC(SYSDATE())-TIME_TO_SEC(t.cre_time)) from t_sms_flow t where ...

  9. 《数学分析Analysis》の 学习笔记

    >> 皮亚诺(Peano)公理 定义自然数 公理2.1   0是一个自然数. 公理2.2   若n是自然数, 则n++也是自然数. 公理2.3   0不是任何自然数的后继, 即对于每个自然 ...

  10. hdu 3842 Machine Works(cdq分治维护凸壳)

    题目链接:hdu 3842 Machine Works 详细题解: HDU 3842 Machine Works cdq分治 斜率优化 细节比较多,好好体会一下. 在维护斜率的时候要考虑x1与x2是否 ...