<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. 浅谈Ddos攻击攻击与防御

    EMail: jianxin#80sec.comSite: http://www.80sec.comDate: 2011-2-10From: http://www.80sec.com/ [ 目录 ]一 ...

  2. C++除法取整

    使用floor函数.floor(x)返回的是小于或等于x的最大整数.如:     floor(2.5) = 2 floor(-2.5) = -3 使用ceil函数.ceil(x)返回的是大于x的最小整 ...

  3. 解决：Android编译源码根目录下/system/vold后，通过push命令将编译生成的vold文件push至system/bin下无法正常开机

    这段时间由于工作需要,在对android根目录下/system/vold进行修改编译的时候,在通过adb命令将vold文件push至/system/bin目录下,adb reboot重启手机却发现一直 ...

  4. XAMPP Apache 配置多端口和多域名方法

    我们在工作中经常遇到同时调试多个网站的情况,那么如何配置呢?就像平时访问网站一样,网站 a.com 与网站 b.com 截然不同.这都是常见现象,如果在局域网中要访问另外一台电脑上的多个网站,就需要使 ...

  5. JS对于Android和IOS平台的点击响应的适配

    IOS点击事件 Click 300毫秒点击延迟 解决办法: 参考:http://cuiqingcai.com/1687.html 可判断设备 if (/(iPhone|iPad|iPod|iOS)/i ...

  6. VS2010命令行编译C#和VC项目

    VS2010命令行编译C#和VC项目 VS2010命令行编译C#和VC项目 根据需要动态创建数据库字段后,需要动态创建或者调整页面,那就需要编译这些页面和后台文件.因此使用命令行编译将会非常方便,对于 ...

  7. 英文VS2010安装中文版MSDN文档方法

    英文VS2010安装中文版MSDN文档方法 2010-06-01 11:52 by 李永京, 51409 阅读, 50 评论, 收藏, 编辑 在2010年4月12号发布Visual Studio 20 ...

  8. 在KCloud上轻松“玩转”Docker

    继CoreOS和Atomic镜像上线之后,刻通云紧跟Docker技术发展脚步,近期又推出了Ubuntu Core镜像,成为国内首家支持Ubuntu Core镜像的基础云服务商,同时也是国内唯一一家同时 ...

  9. （基础篇）PHP字符串函数

    1查找字符位置函数:   strpos($str,search,[int]):查找search在$str中的第一次位置从int开始: stripos($str,search,[int]):函数返回字符 ...

  10. lost+found目录

    If you run fsck, the filesystem check and repair command, it might find data fragments that are not ...