<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. 修改Oracle数据库的字符集为UTF-8

    1.改客户端字符集:通过WINDOWS的运行菜单运行Regedit,修改注册表 Start -> Run -> Rededit <-| Under registry Editor - ...

  2. Java知识结构思维导图

  3. 《JAVA学习笔记(14-1---14-7)》

    [14-1]面向对象-继承-概述 /* //描述学生 class Student { //属性 String name; int age; //行为 void study() { System.out ...

  4. mp3文件 ID3v2 帧标识的含义

    mp3文件 ID3v2 帧标识的含义 Declared ID3v2 frames The following frames are declared in this draft. 4.20 AENC ...

  5. 虚拟机安装Linux系统图文教程

    虚拟机安装Linux系统图文教程 | 浏览:523 | 更新:2014-09-16 15:31 1 2 3 4 5 6 7 分步阅读 Linux系统的安装 工具/原料 VMware 9.0 虚拟机 L ...

  6. 显示ios设备信息的程序

    以下是运行在本人iphone4上的截图,支持中文简体,中文繁体,英文,支持iphone和ipad,当然由于没有ipad,ipad的测试用的模拟器.支持iphone4的Retina屏幕.本来有6个标签, ...

  7. Python 的property的实现 .

    描述符.就是 将某种特殊类型①的类的实例指派给另一个类的属性 ①只要实现一下三种方法的其中一个就是特殊类型. __get__(self,instance,owner) -用于访问属性,他返回属性的值. ...

  8. linux下vi命令

    Vi共分三种模式,分别是“一般模式”.“编辑模式”与“命令行命令模式”. 1.一般模式:vi处理文件时,一进入该文件就是一般模式.在这个模式中,可以使用“上下左右”键来移动光标,可以使用“删除字符”或 ...

  9. Mac OS 使用Git

    入门教程的流程: 什么是Git----------------->为什么选择Git----------------->如何安装Git到MAC OS X------------------& ...

  10. Cocos2d-x 3.x项目创建

    1.首先打开终端,cd到cocos2d-x-3.2目录下,运行命令./setup.py 2. 首先,打开终端cd到目录/cocos2d-x-3.2/tools/cocos2d-console/bin下 ...