上传

<!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. 四种DLL：NON-MFC DLL, Regular DLL Statically/Dynamically Linked to MFC, MFC Extension DLL

    参考资料: https://msdn.microsoft.com/en-us/library/30c674tx.aspx http://www.cnblogs.com/qrlozte/p/484442 ...

  2. c# yyyyMMdd，dd/MM/yyyy 类型字符串转换为datetime 类型

    DateTime ConvertDate = DateTime.ParseExact("20140504", "yyyyMMdd", null, System. ...

  3. 常用<meta>标签

    页面关键词 <meta name="keywords" content="your tags" /> 页面描述 <meta name=&quo ...

  4. 数据库调优过程（二）：找到IO不存在问题，而是sqlserver单表写入IO瓶颈

    物理机上测试IO是否为瓶颈: 使用一个死循环insert into测试数据库最大写入速度: use [iTest]; declare @index int; ; begin ; INSERT into ...

  5. Spring shiro使用

    maven依赖: <dependency> <groupId>commons-collections</groupId> <artifactId>com ...

  6. Leetcode: Majority Element II

    Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. The algorit ...

  7. zjuoj 3610 Yet Another Story of Rock-paper-scissors

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3610 Yet Another Story of Rock-paper-sc ...

  8. paper 5：支持向量机系列二: Support Vector —— 介绍支持向量机目标函数的 dual 优化推导，并得出“支持向量”的概念。

    paper 4中介绍了支持向量机,结果说到 Maximum Margin Classifier ,到最后都没有说“支持向量”到底是什么东西.不妨回忆一下上次最后一张图: 可以看到两个支撑着中间的 ga ...

  9. Oracle角色

    一 .3种标准角色 Qracle为了兼容以前的版本,提供了三种标准的角色(role):CONNECT.RESOURCE和DBA. 1. CONNECT Role(连接角色) 临时用户,特别是那些不需要 ...

  10. 「thunar」给thunar增加搜索文件功能

    1.安装catfish sudo apt-get install catfish 2.配置thunar,添加［自定义动作］ 打开 Thunar 后,点击 Edit -> Configure cu ...