原生HTML5 input type=file按钮UI自定义
原生<input type="file" name="file" />长得太丑
提升一下颜值
实现方案一、设置input[type=file]透明度为0，使用绝对定位遮罩在自定义的按钮标签层的之上.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生HTML5 input type=file按钮UI自定义</title>
<style>
.file_upload_box {
display: inline-block;
width: 200px;
height: 60px;
position: relative;
overflow: hidden;
}
.file_upload_box input[type=file] {
position: absolute;
left: 0;
top: 0;
width: 100%;
line-height: 60px;
opacity: 0;
cursor: pointer;
}
.file_upload_box a {
display: inline-block;
width: 100%;
line-height: 45px;
text-align: center;
font-family: "Microsoft yahei";
background-color: #f60;
color: #FFF;
font-weight: 700;
text-decoration: none;
}
</style>
</head>
<body>
<div class="file_upload_box">
<input type="file" name="file" />
<a href="#none">上传文件</a>
</div>
</body>
</html>
推荐实现方案二、利用label的for属性(for 属性规定 label 绑定到哪个表单元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生HTML5 input type=file按钮UI自定义</title>
<style>
.ui_button {
display: inline-block;
line-height: 45px;
padding: 0 70px;
color: #FFFFFF;
font-family: "微软雅黑";
font-weight: 700;
cursor: pointer;
}
.ui_button_primary {
background-color: #FF6600;
}
label.ui_button:hover {
background-color: #d46216;
}
</style>
</head>
<body>
<label class="ui_button ui_button_primary" for="xFile">上传文件</label>
<form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"/></form>
</body>
</html>
原生HTML5 input type=file按钮UI自定义的更多相关文章
- input type= file 如何更改自定义的样式
input { @include wh(24px,22px);//sass 宽高 @include pa(0,0); //绝对定位 top:0:left:0: opacity: 0; //透明度: o ...
- <input type="file">如何实现自定义样式
利用样式覆盖来实现效果:先看下原本和改变后的样式 1 <!doctype html> 2 <html> 3 <head> 4 <title>file自定 ...
- html中，文件上传时使用的<input type="file">的样式自定义
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】
首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...
- 使用自定义的按钮替换默认的<input type='file'>
可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){ $.fn.brow ...
- input type="file"使用
问题: 在实际开发过程中,会遇到上传文件的一些需求.但是使用原生的<input type="file" />在使用中存在一些问题 在未上传文件时,显示"no ...
- vue项目内嵌入到app input type=file 坑（文件上传插件）
w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...
- 自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 自定义样式 实现文件控件input[type='file']
一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...
随机推荐
- java IO流 之 其他流
一.内存操作流(ByteArrayInputStream.ByteArrayOutputStream) (一). public class ByteArrayInputStream extends ...
- 使用Java纯代码实现MySQL的连接
建立数据库 1. 点击连接-->MySQL: 输入连接名 . 主机名/IP地址 .端口 .用户名.密码(没有密码就省略),然后点击确定,建立的表格是灰色表示关闭状态,双击开启 2. 重新创建 ...
- SSIS 数据类型和类型转换
在进行ETL开发时,数据类型(Data Type)是最基础的,但也容易被忽略,楼主使用的SQL Server 版本是2012,用此博文记录,常用的SSIS数据类型和TSQL数据类型的映射.SSIS的数 ...
- VS2013常用快捷键你敢不会？
F1 帮助文档 F5 运行 F12 跳转到定义 F11 单步调试 Shift+F5 停止调试 Ctrl+滚轮 放大缩小当前视图 Ctrl+L 删除当前行 Ctrl+K,Ctrl+C 注释选中代码 Ct ...
- 【开源】OSharp3.3框架解说系列（7.1）：初始化流程概述
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- 在 ML2 中 enable local network - 每天5分钟玩转 OpenStack（79）
前面完成了一系列准备工作,本节开始将创建各种 Neutorn 网络,我们首先讨论 local network. local network 的特点是不会与宿主机的任何物理网卡相连,也不关联任何的 VL ...
- Description Resource Path Location Type Error executing aapt: Return code -1073741819 Client line 1
Logcat报错:Description Resource Path Location Type Error executing aapt: Return code -1073741 ...
- UWP开发之Mvvmlight实践四：{x:bind}和{Binding}区别详解
{x:bind}是随着UWP被推出而被添加的,可以说是Win10 UWP开发专有扩展.虽然 {x:Bind} 缺少{Binding} 中的一些功能,但它运行时所花费的时间和使用的内存量均比 {Bind ...
- ASP.NET MVC Ajax.ActionLink 简单用法
ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...
- 1Z0-053 争议题目解析304
1Z0-053 争议题目解析304 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 304.What privileges must be granted to allow an a ...