<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. IOS 中的KVO模式 观察者模式

    / // KvoObject.h // KVO // // Created by lin kang on 16/6/7. // Copyright © 2016年 lin kang. All righ ...

  2. hadoop启动之后出现错误：Retrying connect to server: hadoop/192.168.73.100:9000. Already tried 0 time(s);

    INFO ipc.Client: Retrying connect to server: hadoop/192.168.73.100:9000. Already tried 0 time(s); re ...

  3. 网络数据的XML解析

    网络应用中的数据解析,因为最近的应用,无论是Android的和ios平台的,一直用也是建议用的都是Json解析, xml解析都有点被遗忘了. 然后最近自己在做着玩一个ios的小应用,涉及网络数据的抓取 ...

  4. poj1458

    //Accepted 4112 KB 16 ms //最长公共子串 #include <cstdio> #include <cstring> #include <iost ...

  5. 使用HackRF+GNU Radio 破解吉普车钥匙信号

    引文 我最近对软件定义的无线电技术(SDR)产生了浓厚的兴趣,而我对其中一款流行的SDR平台(HackRF)也产生了兴趣,而其频率接收的范围也在1MHz ~6GHz之间(范围较广).而这里也需要提及一 ...

  6. Mifare Classic Tool(MCT)汉化版

    2.0.4 到 2.0.6的更改: 注意:本汉化版本可能不稳定,与此发生的一切后果与作者和汉化者无关. Version : * Bugfix: Fixed crash which occurred i ...

  7. STL 源码分析《2》----nth_element() 使用与源码分析

    Select 问题: 在一个无序的数组中 找到第 n 大的元素. 思路 1: 排序,O(NlgN) 思路 2: 利用快排的 RandomizedPartition(), 平均复杂度是 O(N) 思路 ...

  8. 算法导论----VLSI芯片测试； n个手机中过半是好的，找出哪些是好手机

    对于分治(Divide and Conquer)的题目,最重要是 1.如何将原问题分解为若干个子问题, 2.子问题中是所有的都需要求解,还是选择一部分子问题即可. 还有一点其实非常关键,但是往往会被忽 ...

  9. http://182.92.241.20/mypro/login 偶的点金项目细化分包管理平台即将上线！！

    http://182.92.241.20/mypro/login            偶的点金项目细化分包管理平台即将上线!! 敬请期待! 项目外包利器 项目管理利器

  10. codeforces Educational Codeforces Round 16-E（DP）

    题目链接:http://codeforces.com/contest/710/problem/E 题意:开始文本为空,可以选择话费时间x输入或删除一个字符,也可以选择复制并粘贴一串字符(即长度变为两倍 ...