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

<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. springMVC3学习(十二)--文件上传优化CommonsMultipartResolver

    基于上一篇文件上传发现效率很慢,我们应该对它进行优化  使用springMVC对文件上传的解析器 来处理文件上传的时候需要在spring的applicationContext里面加上springMVC ...

  2. kivy EventDispatcher

    Let's talk about kivy's EventDispatcher here: The codes I have tried here: codes here: from kivy.eve ...

  3. Haskell 笔记（三）类型系统

    类型 (Type) Haskell的类型系统式静态类型系统,在编译的时候就知道数据类型,所以不同类型的值运算在编译的时候就会报错,比如用布尔值和整数运算,在C语言中这种运算就不会报错. Haskell ...

  4. SVN插件

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  5. 12503 - Robot Instructions

      Robot Instructions  You have a robot standing on the origin of x axis. The robot will be given som ...

  6. 解决Eclipse一直loading workbench无法启动的问题

    不知怎地,Eclipse始终停留在Loading workbench状态.反复重启,状态依旧.尝试解决. 停止时显示的状态:”Loading workbench”,看来和这个workbench插件有关 ...

  7. Android替换APP字体 — Typeface

    Android替换APP字体 — Typeface APP字体的思路一般都会想到自定义控件(TextView.EditView),但是项目中会有很多种控件,就算用也会承担一些风险和资源的消耗,主要是这 ...

  8. Android 开发环境 —— Eclipse 启动时报错：Error when loading the SDK

    简述: Eclipse 启动时报错:Error when loading the SDK 错误信息: Error when loading the SDK: Error: Error parsing  ...

  9. CCNA网络工程师学习进程（7）路由器的路由配置

        前面一节已经介绍了路由器的端口配置,接着我们介绍路由器的路由配置:静态路由.默认路由和浮动路由的配置:动态路由协议的配置,包括RIP.IGRP.EIGRP和OSPF.     (1)路由器的基 ...

  10. nginx反射理传apache配置 - cookie去哪儿了？

    在公司接手了个微信项目,由于微信环境下访问网站需要使用对外开放的域名,所以有相关问题,都是直接运维同事帮忙处理. 原理是这样: 方案一: 1. 将域名解析指向测试服务器的地址: 2. 开放相关端口访问 ...