CSS自定义文件上传按钮样式,兼容主流浏览器
解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明。
1.图片
2. [代码][HTML]代码
<div class="box">
<input type="text" name="copyFile" class="textbox" />
<a href="javascript:void(0);" class="link">浏览</a>
<input type="file" class="uploadFile" name="upload"
onchange="getFile(this,'copyFile')" />
</div>
3. [代码][CSS]代码
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font:14px Verdana, Arial, Geneva, sans-serif;
color:#404040;http://www.huiyi8.com/24jieqi/
background:#fff;
}二十四节气图片
img {
border-style:none;
}
.main{
width:300px;
height:60px;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-30px;
}
.box{
position:relative;
float:left;
}
input.uploadFile{
position:absolute;
right:0px;
top:0px;
opacity:0;
filter:alpha(opacity=0);
cursor:pointer;
width:276px;
height:36px;
overflow: hidden;
}
input.textbox{
float:left;
padding:5px;
color:#999;
height:24px;
line-height:24px;
border:1px #ccc solid;
width:200px;
margin-right:4px;
}
a.link{
float:left;
display:inline-block;
padding:4px 16px;
color:#fff;
font:14px "Microsoft YaHei", Verdana, Geneva, sans-serif;
cursor:pointer;
background-color:#0099ff;
line-height:28px;
text-decoration:none;
}
</style>
CSS自定义文件上传按钮样式,兼容主流浏览器的更多相关文章
- CSS自定义文件上传按钮
今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选 ...
- css 文件上传按钮美化
转自:http://zixuephp.net/article-85.html 思路:在一个div里面添加一个图片用作按钮再添加一个input file 文件上传,把文件上传按钮设置透明度为0,绝对定位 ...
- 上传按钮样式优化 <input type="file" />
<html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...
- 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法
(uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...
- 修改input file 文件上传的样式
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- 文件上传下载样式 --- bootstrap
在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框 ...
- Java实现文件上传-按钮弹出上传页面
转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...
- 再springMVC中自定义文件上传处理解决与原spring中MultipartResolve冲突问题
相信很多朋友再用springmvc时都遇见了一个问题,那就是自带的获取上传的东西太慢,而且不知道如何修改,其实不然,spring框架既然给我们开放了这个接口,就一定遵从了可扩展性的原则,经过查看org ...
- 项目二、自定义文件上传函数(js函数)
/** * 文件上传工具 v1.0 * @param file 要上传的文件 * @param url 要上传到的路径 * @param div 要显示的区域 */ function uploader ...
随机推荐
- *AtCoder Regular Contest 096E - Everything on It
$n \leq 3000$个酱,丢进拉面里,需要没两碗面的酱一样,并且每个酱至少出现两次,面的数量随意.问方案数.对一给定质数取模. 没法dp就大力容斥辣.. $Ans=\sum_{i=0}^n (- ...
- hdu 4778 Gems Fight! 状压dp
转自wdd :http://blog.csdn.net/u010535824/article/details/38540835 题目链接:hdu 4778 状压DP 用DP[i]表示从i状态选到结束得 ...
- max file descriptors [4096] for elasticsearch proess is too low, increase to at least [65536]
修改文件 /etc/security/limits.conf 加入以下两行: sonar hard nofile 65536 sonar soft nofile 65536 #备注:sonar这里是 ...
- Currency Exchange(最短路)
poj—— 1860 Currency Exchange Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 29851 Ac ...
- ubuntu远程桌面设置
一.服务器端电脑设置: 1.在搜索端搜索desktop sharing,然后设置后退出 二.客户端电脑设置: 1.在搜索端搜索remmina remote desktop client 2.如图设置: ...
- Spring MVC集成Spring Data Reids和Spring Session实现Session共享出现:No bean named 'springSessionRepositoryFilter' available
出现这个问题:No bean named 'springSessionRepositoryFilter' available的的原因: 1.Spring MVC加载了多个配置文件导致的,并不是版本问题 ...
- oracle存储过程中使用字符串拼接
1.使用拼接符号“||” v_sql := 'SELECT * FROM UserInfo WHERE ISDELETED = 0 AND ACCOUNT =''' || vAccount || '' ...
- IOS --关于粘贴板 ,剪切板 ,UILabel的复制
在iOS中下面三个控件,自身就有复制-粘贴的功能: 1.UITextView 2.UITextField 3.UIWebView UIKit framework提供了几个类和协议方便我们在自己的应用程 ...
- Git checkout on a remote branch does not work
I believe this occurs when you are trying to checkout a remote branch that your local git repo is no ...
- es中插入数据
es中插入数据 学习了:https://www.imooc.com/video/15769/0 分为指定Id和自动生成Id两种: 1,指定Id使用PUT操作 PUT http://127.0.0.1: ...