上传

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <style type="text/css">

  label{

    border-radius: .4rem;

    background-color: #979fa8;

    color: #fff;

    display: inline-block;

    padding: .8rem 4rem;

    cursor: pointer;

    margin-bottom: 1rem;

    position: relative;

    overflow: hidden;

    text-align: center;

    transition: background-color .5s cubic-bezier(.24,.68,.67,.9);

  }

  span{

        cursor: pointer;

    pointer-events: none;

  }

  input[type=file] {

    display: none;

    visibility: hidden;

  }

  </style>

</head>

<body>

<label>

  <span>上传</span>

  <input type="file">

</label>

</body>

</html>

　　

原来样式改变不了（input type="file"）的更多相关文章

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

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

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

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

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

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

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

    在工作中时常会遇到如需要上传功能的按钮,而不像需要系统默认的样式时候,可以采取以下的解决方案: <img onclick="getElementById('file').click() ...

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

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

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

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

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

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

  8. <input type="file">中怎设置那个按钮的样式

    最近才开始学习HTML,在练习表单的过程中,发现在使用<input type="file"/>这个类型的元素,产生的文件框和浏览按扭,它们的样式往往不符合我们的需要.怎 ...

  9. 自定义input[type="file"]的样式

    input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...

随机推荐

  1. nexenta systemcallerror

    最近在试nexenta做iscsi,设置ip出现上面的错误 解决办法,先讲mtu设置为不周与原来的值,比如原来为1500,先设置成1501,就可以了,然后可以再改回来,也是没有问题的!

  2. DG - 将physical standby置于read-only模式

    1.备库处于关闭状态 SQL> startup ORACLE instance started. Total System Global Area 430075904 bytes Fixed S ...

  3. 【转】分布式理论-CAP理论

    一 CAP理论简述 CAP (Consistency, Availability, Partition  Tolerance,) 理论是NoSQL数据库管理系统构建的基础.     强一致性:等同于所 ...

  4. Java NIO学习（一）

    Java NIO 由以下几个核心部分组成: Channels Buffers Selectors 虽然Java NIO 中除此之外还有很多类和组件,但在我看来,Channel,Buffer 和 Sel ...

  5. Leetcode: Shuffle an Array

    Shuffle a set of numbers without duplicates. Example: // Init an array with set 1, 2, and 3. int[] n ...

  6. Dropbox能火，为何它的中国同行不能火？

    http://tech.163.com/15/0510/11/AP8II63H000915BF.html Dropbox能火,为何它的中国同行不能火? 2015-05-10 11:33:55 来源:  ...

  7. 圆的反演变换（HDU4773）

    题意:给出两个相离的圆O1,O2和圆外一点P,求构造这样的圆:同时与两个圆相外切,且经过点P,输出圆的圆心和半径 分析:画图很容易看出这样的圆要么存在一个,要么存在两个:此题直接解方程是不容易的,先看 ...

  8. How to wipe silicon to CPU 如何给CPU正确涂抹硅脂

    随 着计算机性能的提升,CPU的功耗也在不断的增大,虽然现在由于改进了工艺使得在功耗方面得到了一定的缓解,但由于近年来显卡性能的不断增强,也开始走上 了CPU功耗性能成正比的老路,功耗依然还是一个值得 ...

  9. MySQL 中NULL和空值的区别 （转载 http://blog.sina.com.cn/s/blog_3f2a82610102v4dn.html）

    平时我们在使用MySQL的时候,对于MySQL中的NULL值和空值区别不能很好的理解.注意到NULL值是未知的,且占用空间,不走索引,DBA建议建表的时候最好设置字段是NOT NULL 来避免这种低效 ...

  10. 使用UIL（Universal-Image-Loader）异步加载图片

    概要: Android-Universal-Image-Loader是一个开源的UI组件程序,该项目的目的是实现可重复使用的异步图像加载.缓存和显示.所以,如果你的程序里需要这个功能的话,使用它,因为 ...