CSS自定义上传文件按钮样式(兼容I6+)

参考网址:http://www.alleyloft.com/contents/share?id=14

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>demo</title>

<style>

*{margin: 0;padding: 0;}

.box{

position:relative;

float:left;

overflow:hidden;

}

input.uploadFile{

position:absolute;

right:0px;

top:0px;

opacity:0;

filter:alpha(opacity=0);

cursor:pointer;

width:276px;

height:36px;

overflow: hidden;

}

a.link{

float:left;

display:inline-block;

padding:4px 16px;

color:#fff;

font:14px "Microsoft YaHei", Verdana, Geneva, sans-serif;

cursor:pointer;

line-height:28px;

text-decoration:none;

}

</style>

</head>

<body>

<div class="box">

<a href="javascript:;"  class="link">浏览</a>

<input ty pe="file" class="uploadFile"  onchange="getFile(this,‘copyFile‘)">

</div>

</body>

</html>

时间: 2024-12-05 17:46:06

CSS自定义上传文件按钮样式(兼容I6+)的相关文章

怎样用纯HTML和CSS更改默认的上传文件按钮样式

如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览器里的样子和布局是一样的上传文件按钮.我们可以这样: 步骤1.创建一个简单的HTML标记 1 2 3 4 <div class="fileUpload btn btn-primary">     <span>Upload</span>     <i

上传文件的样式

在网上找了很久上传文件的样式,并没有适合自己的,现在推荐一个样式给大家,可以看到自己是否选到文件和文件名.效果如下图所示: html 代码如下: <div class="uploading"> <span>上传文件:</span> <input class='view' id="viewfile" type="text" onmouseout="document.getElementById('

web前端上传文件按钮自定义样式

思路: 按钮进行隐藏,样式自己该怎么写怎么写,之后通过js监测input改变上传文件. 前端写法: // jquery + bootstrap写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件获取URL</title> <link rel="stylesheet" h

万家报账平台没有“上传文件”按钮的解决办法

在有的电脑没有"上传文件"的按钮? 第一步:首先检查浏览器设置. 第二步:找到IE的Internet选项菜单,开启菜单栏的根据下列方面找,如下图: 第三步:找到Internet选项后,点击,选择安全选项卡,并点击"自定义级别" 第四步:找到"将文件上载到服务器时包含本地目录路径"选择"启用".然后点击确定关闭IE,重启打开. 第五步:更新浏览器的flash版本.在百度中搜索"flash player官网"即

使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹

在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <configSections> 3: ... 4: <section name="backload" type="Backload.Configuration.BackloadSection, Backload, Version=1.9.3.1, Culture=neutra

上传文件按钮美化,上传文件前后状态控制

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的. input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 注:input 的 type 为 file 时,它的 name 必须有值,因为这个 name 会做为上传文件信息的数组名称. <a href="javascript:;" class=&q

WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作中遇到的一个问题:公司的后端同事用bootstrap的模态框,结合WebUploadder做后台上传文件的功能的时候,发现上传按钮点击无效.同事过来请求我支援,我研究了下,发现了三种解决方案,下面具体说说是这三种方法是怎么解决的. 我们先来分析一下解决这个问题的思路: 为什么上传控件放到模态框里面就

自定义上传控件(兼容IE8)

上传控件是 <input type="file"/> 而实际开发过程中,都会自定义一个控件,因为这个控件本身难看,而且不同浏览器效果不一样. 如IE8显示如下: 谷歌浏览器显示是这样子的: 所以通常需要自定义. 1.通常的做法就是把上传控件隐藏,即style="display:none;",再添加一个按钮,设置所需样式,然后通过js触发上传控件的事件. 这样子在谷歌.火狐等浏览器是可以的,但是在IE8中就不兼容了,好多事件都触发不到,比如我需要用到上传控

修改上传文件按钮

HTML: <form id="imgFile" action="" method="post" enctype="multipart/form-data"> <a href="javascript:void(0);" class="file"> 上传头像 <input type="file" name="rp_pic_file