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 ...
随机推荐
- 蜥蜴 BZOJ 1066
蜥蜴 [问题描述] 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平面距 ...
- Mysql安装及自动化部署脚本方案
一.简介 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据存储在文件中,但是 ...
- perl学习之精髓中的精髓
1.是函数就有返回值: 比如:chomp函数,其可以除去换行符,但其也有返回值 chomp($xx) #这是去除xx的换行符 $yy=chomp($xx) #这是看这次除去了几个换行符,也就是函数运 ...
- 基于CI框架的管理系统
1:ci框架是有入口文件的,前端和后台入口文件(index.php,admin.php):里面修改$application_folder = 'application/home': 2:项目基本都是在 ...
- VirtualBox 5.0.10 中 Fedora 23 在安装了增强工具后无法自动调节虚拟机分辨率的问题(改)
VirtualBox 5.0.10 中安装 Fedora 23,即使在安装了增强工具后,仍然会发现虚拟机无法根据 VirtualBox 的运行窗口大小自动进行分辨率调节.究其原因,主要是因为 Fedo ...
- (10) android控件-date
1.TimePicker <TimePicker android:id="@+id/timePicker4" android:layout_width="wrap_ ...
- Codeforces Round #307 (Div. 2) D. GukiZ and Binary Operations
得到k二进制后,对每一位可取得的方法进行相乘即可,k的二进制形式每一位又分为2种0,1,0时,a数组必定要为一长为n的01串,且串中不出现连续的11,1时与前述情况是相反的. 且0时其方法总数为f(n ...
- 初涉Git/Github
初涉Git/Github 第一部分:我的本次作业成果 我自己个人的github地址是:STRSong 我们开发团队小组的github地址是:三组 第二部分:给同学推荐github资源 推荐1 这个推荐 ...
- Hive入门及常用指令
基础命令show databases; # 查看某个数据库use 数据库; # 进入某个数据库show tables; # 展示所有表desc 表名; # 显示表结构show partitions 表 ...
- Java利用Mybatis进行数据权限控制
权限控制主要分为两块,认证(Authentication)与授权(Authorization).认证之后确认了身份正确,业务系统就会进行授权,现在业界比较流行的模型就是RBAC(Role-Based ...