实现方法一:

自定义input file样式;一般都是通过隐藏input,通过定义label来实现。这种做法要注意的是label的for属性要指定input对应的id;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#file {
display: none;
}
label {
padding: 6px 15px;
border-radius: 18px;
background: #2F9DEA;
color: #FFF;
border: 1px solid #49A9ED;
box-shadow: inset 0px 0px 3px #FFF;
}
label:focus,
label:active {
box-shadow: none;
}
</style>
</head>
<body>
<div>
<label for="file">
<input type="file" id="file" />上传文件
</label>
</div>
</body>
</html>

效果如下:

点击后效果:

实现方法二:

<style type="text/css">
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
} .a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity = 0);
cursor: pointer
} .a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
} .file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
} .file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
} .file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>

  

<div>
<a href="javascript:void(0);" class="a-upload"> <input type="file"
name="" id="">点击这里上传文件
</a> <a href="javascript:void(0);" class="file">选择文件 <input type="file"
name="" id="">
</a>
</div>

  效果:

自定义input file样式的更多相关文章

  1. input:file样式怎样修改

    问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...

  2. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  3. 自定义input file 属性

    <label class="input"><input title="浏览文件" type="file" />浏览… ...

  4. input(file)样式修改及上传文件名显示

    实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...

  5. input file 样式以及获取选择文件方法集合

    样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display: ...

  6. input file样式美化

    默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...

  7. 使用CSS实现自定义input[checkbox]样式

    思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...

  8. input.file样式修改

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 修改input:file样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. Collections.unmodifiableList()的使用与场景

    在<重构——改善既有代码的设计>一书中,有一种重构手法叫Encapsulate Collection(封装集群),为了演示该重构手法,我写了四个类,通过对比重构前后的代码,加深对这一重构手 ...

  2. C#操作Excel(NPOI)

    这两天需要读取Excel文件,网上找了找,发现NPOI用的是最多的,于是研究了一下.这里大概介绍一下. 首先,在NPOI中一个Excel文件对应了一个IWorkbook对象,Excel中的一个工作表对 ...

  3. 文本溢出、垂直外边距合并、BFC、hasLayout

    今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...

  4. 富文本编辑器CKEDITOR的使用配置(问题注解)

    CKEDITOR是一款非常轻便的富文本编辑器,如上图:参考网上的使用方法,我以.net为例,在aspx页面使用, 准备工作:首先要下载控件包,将解压后的整个文件夹添加到项目根目录. 第一步:引用js, ...

  5. sql数据库之间数据的转录

    private void Form1_Load(object sender, EventArgs e) { BindDataBase(combDataBaseNew, , ""); ...

  6. GDI+基础(3)

    常用图形绘制 <%@ Page ContentType="image/gif" Language="C#" %> <!--ContentTyp ...

  7. c# 预处理命令

    在编译之前进行的处理. 预处理命令以符号“#”开头. #define 只能 定义符号 不能定义宏(#define PI 3.14 这是错的,在c#中没宏) #region #endregion #if ...

  8. 在Eclipse中编译maven项目出的问题

    在Eclipse中编译Maven项目,运行 jetty:run 指令的时候会出错,在 JRE选项卡中加入: -Dorg.mortbay.util.URI.charset=GBK-Xms512m -Xm ...

  9. 电机KV值对应的桨

    KV2200 -6寸 KV1400 -8寸 KV1000 -10寸

  10. HTML5 canvas中的路径方法

    路径方法 fill()                                填充当前绘图(路径) stroke()                        绘制已定义的路径 begin ...