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

<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. ckedit 在源码模式下插入文本

    ckedit的源码模式下是禁用insertText方法的 ,下面是解决方案 if(CKEDITOR.instances[Itemname].mode=='wysiwyg'){ CKEDITOR.ins ...

  2. WCF引用方式

    WCF之各种WCF引用方式 写在开头:本文内容来自 WCF全面解析中的一个经典例子,如果你已经看过了,那么可以忽略本文,本文旨在和大家分享不一样的WCF使用方法. 准备工作: 1.创建解决方案WCFS ...

  3. Centos 64位 Install certificate on apache 即走https协议

    Centos 64位 Install certificate on apache 即走https协议 一: 先要apache 请求ssl证书的csr 一下是步骤: 重要注意事项 An Importan ...

  4. OOC，泛型，糟糕的设计。

    虽然大部分都在谈ooc的编译器设计,但更多的内容在于程序设计的思想,复杂度,维护上面.我希望这篇文章能对读者有哪怕一丁点的帮助. 这篇文章遵循CC-BY-NC. = OOC,泛型,与那些糟糕的设计 原 ...

  5. 微信公众号开发之网页中及时获取当前用户Openid及注意事项

    目录 (一)微信公众号开发之VS远程调试 (二)微信公众号开发之基础梳理 (三)微信公众号开发之自动消息回复和自定义菜单 (四)微信公众号开发之网页授权获取用户基本信息 (五)微信公众号开发之网页中及 ...

  6. Java基础IO文件拷贝练习题

    /** * 编写一个程序,把指定目录下的所有的带.java文件都拷贝到另一个目录中,拷贝成功后,把后缀名是.java的改成.txt. */ 1.我们看到这个题还是用大化小的思想来做 分析:1.拷贝 & ...

  7. testlink用例转换小工具（excel转为xml，python版）

    前面文章记录了testlink的安装方法(CentOS 7下安装xampp和testlink),由于testlink仅支持xml格式的用例导入,研究了下excel转xml的方法, 从网上其他网友那里借 ...

  8. elike.python.function()

    将python用于基本的科学计算,能完全替代matlab.就最近写的一个物理模型程序来看,用python建立的物理模型的可控性,代码的层次性都优于matlab,只不过python没有matlab那样的 ...

  9. Python3.5环境下安装wxPtyhon

    Win7系统下,Python3.5环境下安装wxPtyhon, 已成功安装并运行. 1.先从下面网站下载对应的whl版本. https://wxpython.org/Phoenix/snapshot- ...

  10. input中的name，value以及label中的for

    input具有很多属性,比较常用的有type,value,name,placeholder,multiple,checked等.对于其中的name.value.label相关以及标签外的文字,我一直是 ...