上传

<!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. Perl Debug error: SetConsoleMode failed, LastError=|6|

    Windows Strawberry Perl. 解决办法: 1. 设置环境变量 TERM = dumb 2. 重启 CMD 参考资料: http://padre.perlide.org/trac/t ...

  2. go 语言的库文件放在哪里？如何通过nginx代理后还能正确获取远程地址

    /usr/local/Cellar/go/1.5.1/libexec/src/ 他的RemoteAddr 是从哪里获取? func (c *conn) RemoteAddr() Addr { if ! ...

  3. C++Primer 第十七章

    //1.当我们希望将一些数据组合成单一对象,但又不想麻烦地定义一个新的数据结构来表示这些数据的时候,tuple非常有用.其和其伴随类型和函数都定义在头文件tuple中,声明在命名空间std中. tup ...

  4. Lintcode: Nth to Last Node in List

    Find the nth to last element of a singly linked list. The minimum number of nodes in list is n. Exam ...

  5. HTML部分标签和代码

    1.1.1 一般标签.格式控制标签 所谓HTML就是 Hyper Text Markup Language(超无文本标记语言) <html>   开始标签 <head> 网页上 ...

  6. 如何抠PSD素材中的图片

    在网上经常可以找到一些好看呢的PSD素材,如何才能将这些素材抠出来 存成一张张的png图片呢? 在PhotoShop中 1·隐藏无用的图层,然后窗口中仅剩需要看到的那个素材图 2·用工具选择该区域(注 ...

  7. [原创]java WEB学习笔记68：Struts2 学习之路-- 类型转换与复杂属性配合使用

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. php初探

    1.php中的连接符.可以连接多个字符串,相当于java中的+ 2.echo必须与后面的输出内容有至少一个空格 3.php编程中每个结尾都需要添加分号

  9. linux第10天 msg消息队列

    cat /proc/sys/kernel/msgmax最大消息长度限制 cat /proc/sys/kernel/msgmnb消息队列总的字节数 cat /proc/sys/kernel/msgmni ...

  10. xsd与xsl文件的区别

    请问xsd与xsl文件的区别在哪里呢?   我刚学xml,一开始用xmlspy学的,然后生成了一个xsd的文件,但在网上下的源程序是有一个xsl文件的,很不明之间有什么区别的,为什么别人的程序不用xs ...