上传文件样式美化

点击输入框和上传按钮都打开任务管理器(兼容IE和火狐):

HTML:

<div class="row">
    <input type="text" class="popjoin-input popjoin-fileinput" readonly="readonly" />
    <a href="javascript:void(0)" class="popjoin-upload">上传</a>
    <input type="file" class="popjoin-file" />
</div>

CSS:

.row{
    position: relative;
}
.popjoin-input{
    background: #FFFFFF;
    border: 1px solid #D7D7D7;
    height: 24px;
    padding: 6px 9px;
    width: 550px;
    color: #666666;
    outline: none;
    float: left;
}
.popjoin-fileinput{
    width: 450px;
}
.popjoin-upload{
    width: 90px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #666A82;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 16px;
    float: right;
}
.popjoin-upload:hover{
    background: #76798F;
    text-decoration: none;
}
.popjoin-filerow{
    overflow: hidden;
}
.popjoin-file{
    position: absolute;
    left: 0;
    width: 570px;
    top: 0;
    height: 38px;
    font-size/*\**/:570px\9;/*IE*/
    filter: alpha(opacity=0);
    opacity: 0;
    cursor: pointer;
    overflow: hidden;
}
时间: 2024-08-29 13:06:21

上传文件样式美化的相关文章

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

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

上传文件样式

html <div class="file"> <label for="file">文件:</label> <div class="userdefined-file"> <input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何文件&

改变上传文件样式

首先,给 <input type="file"> 元素戴个套子,这样比较安全嘛,是不是?看代码: <span class="input-file">浏览...<input type="file"></span> 有了这个安全的外层容器,我们就可以开搞了.问题的核心有两点:第一,把丑陋的原生上传控件给藏起来:第二,支持点击上传功能. 关键的代码片段: .input-file { overflow:hi

html+css上传文件控件美化

html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件</title> <style> label { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #9

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

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

兼容IE浏览器样式的html上传文件控件

最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE.Chrome浏览器的显示效果相差很大,为了统一样式,我参考了网上的许多方法,下面给出我自己的代码实现(实际上就是在原生的input file上面加个外壳,再添加一些样式,让它看上去不像原生的这么丑) html部分 <div class="upload-box"> <div class="input&quo

文件上传下载样式 --- bootstrap

在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框架实现文件上传的全部代码,敬请期待. 先看图片示例: 本示例包括下载样本文件样式和上传文件样式. 直接先上代码,最后讲解: <div class="form-group col-md-12 has-feedback" id="file"> <label

上传文件的样式

在网上找了很久上传文件的样式,并没有适合自己的,现在推荐一个样式给大家,可以看到自己是否选到文件和文件名.效果如下图所示: 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