<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. 《java版进制转换》

    import java.util.Scanner; class 十进制转成十六进制_2 { public static void main(String[] args) { int num = 0; ...

  2. PHP面向对象的继承

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. javascript 变量声明有var与无var 的区别

    1.在函数作用域内 加var定义的变量是局部变量,不加var定义的就成了全局变量.使用var定义var a = 'hello World';function bb(){var a = 'hello B ...

  4. Apache与Nginx的区分比较

    什么是Nginx代理代理服务器,它和Apache相比又有什么区别呢?你又该如何选择使用呢,用其中一个还是两者都用?我们将会在这里探索一下这些问题的答案. Apache服务器从1995年就开始使用了.相 ...

  5. Ch2.Making Reconmmendation in PCI

    做<Programing Collective Intelligence>中chapter 2.Making Recommendation的实例,有3个问题花了好长时间: 1. 遇到报错& ...

  6. win7笔记本无线连上无法上网

    打开 控制面板----网络与共享中心------更改适配器属性-----找到你的WIFI的那个适配器右键属性----双击internet协议版本4---点上自动获取IP和DNS

  7. Ubuntu 环境变量及 ADB 配置

    Ubuntu Linux 环境变量 同Windows一样,Ubuntu Linux系统包含两类环境变量:系统环境变量和用户环境变量.系统环境变量对所有系统用户都有效,用户环境变量仅仅对当前的用户有效. ...

  8. 黑马程序员——【Java基础】——Java语法基础

    ---------- android培训.java培训.期待与您交流! ---------- 一.关键字 1.定义和特点 定义:被Java语言赋予了特殊含义的单词. 特点:关键字中所有的字母都为小写. ...

  9. 日历控件修改的JS代码

    var bMoveable=true; var _VersionInfo=" " ; //============================================= ...

  10. Nearest number - 2_暴力&&bfs

    Description Input is the matrix A of N by N non-negative integers. A distance between two elements A ...