input[type=file]的美化
__
一般的选择框在美化过程中会出现各种问题,样式出错，文字无法更改等...
所有随之而生的便是这样的一种修饰方式：[将type=file的input与另一个按钮通过js绑定，这样便可以通过改变另一个按钮的样式来达到美化的效果了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.dif{
height:40px;background:#f5f8fa;border:none;border-radius:30px;
}
</style>
</head>
<body>
<input type="file"style="display:none" >
<button class="dif" onclick="F_Open_dialog()">上传文件</button>
</body>
<script type="text/javascript">
function F_Open_dialog() {
document.getElementById("btn_file").click();
}
</script>
</html>
input[type=file]的美化的更多相关文章
- css input[type=file] 样式美化，input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】
首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...
- input[type=file] 样式美化，input上传按钮美化
<style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...
- input type=file美化
最近碰到input type=file 之前用模拟点击来实现美化,发现在IE7下会有bug导致图片上传不上去,最后改用直接美化的方法 <!DOCTYPE html> <html la ...
- input type=file 上传文件样式美化（转载）
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- html input[type=file] css样式美化【转藏】
相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...
- 【原创】js中input type=file的一些问题
1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...
随机推荐
- andorid开发build.gradle 增加几种产品的方法
因为需要有些ndk的开发,cmakelists里需要定义不同的变量,这个在网上搜索解决方案,不是很容易就直接找到答案. 尝试了不少,最后找到解决方案.升级Gradle3.0,这个文章价值高. 在ras ...
- (转载)MyBatis传入多个参数的问题
原文地址:https://www.cnblogs.com/mingyue1818/p/3714162.html 一.单个参数: public List<XXBean> getXXBeanL ...
- 接口自动化框架(java)--3.get,delete请求,Excel管理多种请求类型
这套框架的报告是自己封装的 每种请求类型放入不同的sheet中,就可以避免新建太多的excel去做数据驱动. XSSFSheet类提供了一个读取sheet的方法,getSheetAt(int),通过下 ...
- Xamarin.Forms 自定义 TapGestureRecognizer 附加属性
While creating Xamarin.Forms applications, definitely you are going to need TapGestureRecognizer oft ...
- Centos7下使用Ceph-deploy快速部署Ceph分布式存储-操作记录
之前已详细介绍了Ceph分布式存储基础知识,下面简单记录下Centos7使用Ceph-deploy快速部署Ceph环境: 1)基本环境 192.168.10.220 ceph-admin(ceph-d ...
- C#中DataTable与XML格式的相互转换
1.DataTable转换成XML public string ConvertDataTableToXML(DataTable xmlDS) { MemoryStream stream = null; ...
- java.lang.IllegalAccessError: org.apache.commons.dbcp.DelegatingPreparedStatement.isClosed()Z
做spring和mybaits整合时出现的错误,让这个问题困扰了一早上,通过查资料终于把这个问题解决了 具体问题描述: java.lang.IllegalAccessError: org.apache ...
- CentOS 7 Sersync+Rsync 实现数据文件实时同步
rsync+inotify-tools与rsync+sersync架构的区别? 1.rsync+inotify-tools inotify只能记录下被监听的目录发生了变化(增,删,改)并没有把具体是哪 ...
- IP地址 0.0.0.0 是什么意思？
IP地址0.0.0.0是什么意思? 根据RFC文档描述,它不只是代表本机,0.0.0.0/8可以表示本网络中的所有主机,0.0.0.0/32可以用作本机的源地址,0.0.0.0/8也可表示本网络上的某 ...
- qt手写输入法资料
论文: https://max.book118.com/html/2015/1229/32204490.shtm 开源库: zinna Linux下使用的Tegaki就是使用的这个库 csdn博客资料 ...