<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. PAT 10-0 说反话

    我写了两种实现方法,其中第二种是参考Yomman园友的(http://www.cnblogs.com/yomman/p/4271949.html).我的方法(方法一)是用一个数组存放输入的字符串,另一 ...

  2. struts2+hibernate整合开发步骤

    百度的各种代码,步骤,自己整合了一下 1,创建数据库 常用mysql   creat table..... 2,在WebContent下的bin中添加相应的包 http://pan.baidu.com ...

  3. C#获取项目程序及运行路径的方法

    1.asp.net webform用“Request.PhysicalApplicationPath获取站点所在虚拟目录的物理路径,最后包含“\”: 2.c# winform用 A:“Applicat ...

  4. iOS多线程--NSOperation 浅显易懂

    NSOperation是基于GCD的一套多线程实现方案,和GCD一样,线程的生命周期是由系统来自动管理的,不用像NSThread和Pthread一样让程序员手动管理.相对于GCD来说,它更加地面向对象 ...

  5. 产生冠军 map 的 应用 .

    开始 比赛  ,  每一次的 比赛 都会有人失败 , 如果产生英雄的话  , 那就是产生 唯一一个 没有被打败的人  , 就是英雄, . #include<stdio.h> #includ ...

  6. Executing modules as scripts

    When you run a Python module with python fibo.py <arguments> the code in the module will be ex ...

  7. 后台代码对iBatis配置文件中具体的sql语句的调用实现（被封装的增删改查）

    using IBatisNet.Common.Exceptions; using IBatisNet.DataAccess; using IBatisNet.DataAccess.DaoSession ...

  8. Find Minimum in Rotated Sorted Array II

    Follow up for "Find Minimum in Rotated Sorted Array":What if duplicates are allowed? Would ...

  9. 使用ingress qdisc和ifb进行qos

    ifb   The Intermediate Functional Block device is the successor to the IMQ iptables module that was ...

  10. win7将 esc与 capslock 互换

    一天手软,于是买了一个机械键盘.cherry g80-3494 红轴各方面都不错就是有一个问题我经常用vim,其中esc.及F键区离主键盘区实在是太远了. 习惯于vim模式的人都有一种懒症,就是手指非 ...