原生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,按照整成步 ...
随机推荐
- Nginx服务器之基础学习
一.Nginx介绍 nginx:Nginx是一种软件服务器(轻量级),故它最主要的功能就是可以与服务器硬件结合,我们的应用程序可以放在nginx服务器上进行发布,已达到让网民浏览的效果.除此自外,Ng ...
- python django基础(一)
Django简介:Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的框架模式,即模型M,视图V和控制器C.不过在Django实际使用中,Django更关注的是模型(Mod ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 咨询管理的架构
咨询.留言.投诉等功能是网站应具备的基本功能,可以加强管理员与用户的交流,在上次完成文章部分后,这次开始做Member区域的咨询功能(留言.投诉都是咨询).咨询跟文章非常相似,而且内容更少.更简单. ...
- c++堆
c++ reference: http://www.cplusplus.com/reference/algorithm/make_heap/ heap并不属于STL容器组件,它分为 max heap ...
- JavaScript之自我总结篇
最近在看汤姆大叔的"深入理解JavaScript系列",写得真的不错,对于我而言特别是12章到19章,因为大叔研究的点,就主要是从底层来研究JavaScript为什么会出现钟种特有 ...
- windows server 注意windows的temp目录
windows解压缩包.安装软件时,会生成一些临时文件存放在temp目录中,windows不会自动删除这些文件. 临时文件目录可以在环境变量中查看和配置 在工作机or个人PC机中中这个目录一般不会有什 ...
- 关于MVC EF架构及Repository模式的一点心得
一直都想写博客,可惜真的太懒了或者对自己的描述水平不太自信,所以...一直都是不想写的状态,关于领域驱动的东西看了不少,但是由于自己水平太差加上工作中实在用不到,所以一直处于搁置状态,最近心血来潮突然 ...
- new的探究
new操作符易用,但是往往容易忽略对其的理解. var foo= new Foo(); 这个简单的语句,涉及到了一系列的步骤: 1),给对象开辟内存,即 var foo= {}; 2),修改新对象的隐 ...
- ZOJ Problem Set - 1334 Basically Speaking ac代码及总结
这道题目不难,是一道简单的进制转换问题,但是发现了自己两个遗漏的知识点: 1.关于scanf (1)scanf函数在输入时是以回车或者空格作为一次输入的结束 (2)scanf函数在输入字符串的过程中是 ...
- (2)从实际项目谈起,基于MEF的插件框架之总体设计
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.MEF框架简介 MEF的全称是Managed Extensibil ...