<html>
<head>
<title>上传按钮样式优化</title>

<style>
.form-element-file-wapper {
position: relative;
width: 100px;
height: 32px;
overflow: hidden;
margin: 0 auto;
}

.form-element-file-wapper button {
width: 100px;
height: 32px;
background-color: #38ADFF;
color: #fff;
}

.form-element-file-wapper input[type=file] {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 32px;
opacity: 0;
cursor: pointer;
font-size: 500px;
}

</style>

</head>
<body>

<div class="form-element-file-wapper">
<button type="button">上传照片</button>
<input type="file" accept="image/jpeg,image/png,image/gif">
</div>

</body>
</html>

<!--

总结：

1.<div class="form-element-file-wapper">作为父元素 style="position: relative;"

2.<input type="file" />置为不可见。 style="position: absolute;"  让元素漂在<button></button>元素上面。用户点击其实就点击这元素。

3.<button type="button">上传照片</button> 作为显示按钮，显示给用户看。

-->

上传按钮样式优化 <input type="file" />的更多相关文章

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

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

  2. 有关图片上传的相关知识input type=file，HTML5的 input:file上传类型控制

    遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...

  3. input上传按钮的优化

    在使用input标签按钮的时候,<input type="file" value="" /> 显示很难看,怎么办? 使用label <li c ...

  4. type=file的inpu美化，自定义上传按钮样式

    <div class="div1"> <div class="div2">点击上传</div> <input type ...

  5. input按钮上传按钮样式

    主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. CSS自定义文件上传按钮样式，兼容主流浏览器

    解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.​1.图片​​2. [代码][HTML]代码 <div class="b ...

  7. 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

    (uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...

  8. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  9. jquery判断 input type="file"上传文件是否为空

    要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...

随机推荐

  1. 新版的tomcat里面get请求通过http协议的时候似乎默认是UTF-8的编码了吗？

    不在servler.xml的connector中添加URICoding=“UTF-8”,使用默认值一样没有乱码,而添加URICoding=“iso-8859-1”就是乱码了. POST请求还是用iso ...

  2. Android常见控件— — —TextView

    <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=&qu ...

  3. POJ 2752 - Seek the Name, Seek the Fame （KMP）

    题意:给一个字符串s,问s的某个前缀与后缀相同的情况时,长度是多少. 此题使用KMP的next数组解决. next数组中,j=next[i],next[i]表示S[0...i-1]的某个后缀(字符串S ...

  4. 利用DetachedCriteria实现模糊查询和分页

      分类: Java-Developing  前段时间在做模糊查询,并利用数据库分页,DAO用hibernate实现,刚开始的时候 根据业务层的数据,拼hql语句进行查询,且不说要进行一些if判断,单 ...

  5. (转)关于java和web项目中的相对路径问题

    原文:http://blog.csdn.net/yethyeth/article/details/1623283 关于java和web项目中的相对路径问题 分类: java 2007-05-23 22 ...

  6. hdu 2051

    ps:这道题是题目坑爹了...题目说不考虑n=0的...但其实要考虑...醉了 中文意思:输入一个10进制的数,输出他的二进制数 代码: #include "stdio.h"int ...

  7. The constness of a method should makes sense from outside the object

    C++的encapsulation机制使得我们可以使得一个类的逻辑接口和内部表示有很大的差异,比如下面这个矩形类: class Rectangle { public: int width() cons ...

  8. linux上安装hadoop

    机器准备 物理机器 总 共4台,想配置基于物理机的hadoop集群中包括 4 个 节点: 1 个 Master , 3 个 Salve , 节点之间局域网连接,可以相互 ping 通Ip分布 为192 ...

  9. AFNetworking实现程序重新启动时的断点续传

    今天需要用AFNetworking实现断点续传的功能,但是在进行了一番研究之后,发现AFNetworking虽然支持下载文件的暂停和继续,但是程序重新启动后再次下载无法进行续传.网上有说可以通过AFD ...

  10. 修复Dll文件

    for %1 in (%windir%\system32\*.dll) do regsvr32.exe /s %1