自定义input file样式
实现方法一：
自定义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样式的更多相关文章
- input:file样式怎样修改
问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...
- input file样式修改，图片预览删除功能
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...
- 自定义input file 属性
<label class="input"><input title="浏览文件" type="file" />浏览… ...
- input(file)样式修改及上传文件名显示
实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...
- input file 样式以及获取选择文件方法集合
样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display: ...
- input file样式美化
默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...
- 使用CSS实现自定义input[checkbox]样式
思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...
- input.file样式修改
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 修改input:file样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- Entity Framework 重写OnModelCreating，控制生成表名的单复数
重写OnModelCreating,控制生成表名的单复数 public class MYDbContext : DbContext { public DbSet<User> Users { ...
- python 下的数据结构与算法---8：哈希一下【dict与set的实现】
少年,不知道你好记不记得第三篇文章讲python内建数据结构的方法及其时间复杂度时里面关于dict与set的时间复杂度[为何访问元素为O(1)]原理我说后面讲吗?其实就是这篇文章讲啦. 目录: 一:H ...
- 关于Aspose对于Word操作的一些扩展及思考
Aspose.word Aspose.Words是一款先进的类库,通过它可以直接在各个应用程序中执行各种文档处理任务.Aspose.Words支持DOC,OOXML,RTF,HTML,OpenDocu ...
- bootstrap兼容IE8的一些注意
准备 bootstrap 3.3.5 jQuery 1.12.0 注意 支持html5 需要引入html5.js 支持placeholder 需要引入placeholder.js ie8 不支持 fo ...
- memmove 的实现
baidu的笔试题目 用C语言实现一个公用库函数void * memmove(void *dest,const void *src,size_t n).该函数的功能是拷贝src所指的内存内容前n个字节 ...
- OnCreate
用于创建插入符 /* CClientDC dc(this); TEXTMETRIC tm; dc.GetTextMetrics(&tm);//得到窗口字体信息 CreateSolidCaret ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
- 生产环境搭建MySQL复制的教程（转）
[导读] 网络上有很多关于MySQL复制搭建的步骤和范例,以及手册上有一章完整的篇幅,讲述MySQL复制的原理.搭建步骤.优化等,但依然存在很多刚开始学习MySQL知识或者刚进入DBA行业的朋友咨询, ...
- Head First --- Python 第一章
List 1. python -V 查看python当前版本 2. list.pop() 删除列表里的最后一个元素,并返回删除元素的值 3. list.extend(['a','b','c']) 在原 ...
- Spark 资源调度及任务调度
1. 资源分配 通过SparkSubmit进行提交应用后,首先会创建Client将应用程序(字节码文件.class)包装成Driver,并将其注册到Master.Master收到Client的注册请 ...