<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. Struts2标签<s:textfield/>

    中的name="",取值顺序是,如不加#,先从root中栈顶取,没有取到(即使栈顶有这个属性但是属性为空还是向下取,这点和el表达式不同)就去actioncontext的map中取 ...

  2. ZOJ 1654 - Place the Robots （二分图最大匹配）

    题意:在一个m*n的地图上,有空地,草和墙,其中空地和草能穿透攻击光线,而墙不能.每个机器人能够上下左右攻击,问在地图上最多能放多少个不互相攻击的机器人. 这个题和HDU 1045 -  Fire N ...

  3. Jquery中的prop()方法 全选或全不选

    注意: prop()在高版本才会有效, 低版本用attr(); $(function(){ // 元素checkbox var aChecked = $('.checkGoods'); // 全选 v ...

  4. 利用NTFS交换数据流隐藏文件

    利用NTFS交换数据流隐藏文件 发表于 2012 年 12 月 15 日 由 晴刃 这篇文章介绍一下Windows的NTFS文件系统的ADS(alternate data streams,交换数据流) ...

  5. 三、XML编程（CRUD）

    DOM:W3C标准SAX:simple API for XMLDOM解析会把整个文档读入内存变成一个对象,会把标签变为Element对象,会把文本变成Text对象,会把属性变为Attribute对象, ...

  6. ACDream-C - Transformers' Mission（Dijastra最短路径）

    dijstra求最短路径:经典应用题目: 题意:给你一个带权值无向图,权值是A点到B点的时间,然后告诉你起点,一个人可以去炸掉一个结点或多个节点,也可以派多个人,最终这些人在终点集合,问最后一个到达终 ...

  7. Median Weight Bead_floyd

    Description There are N beads which of the same shape and size, but with different weights. N is an ...

  8. CI控制器的继承问题

    在项目中经常用到这样一种情况,后台中每个页面都要判断Session来确定用户是否登陆状态.对于在Codeigniter中,那么就会考虑每个控制器继承一个公用控制器. 比如:AdminBase 为应用后 ...

  9. pscp详解

    pscp详解 在linux中,我们常用scp命令传输文件: 如以下实例,我们想把当前服务器文件abc.sql传输到192.168.1.1服务器上,我们可以执行以下命令: scp /home/perso ...

  10. Smart210学习-----lcd驱动

    帧缓冲设备 1.1帧缓冲设备:帧缓冲(framebuffer)是 Linux 系统为显示设备提供的一个接口,它将显示缓冲区抽象,屏蔽图像硬件的底层差异,允许上层应用程序在图形模式下直接对显示缓冲区进行 ...