input file文件上传样式
2015-06-26 08:24
691 查看
<style>
.file-group {
position: relative;
width: 200px;
height: 80px;
border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
overflow: hidden;
cursor: pointer;
line-height: 80px;
font-size: 16px;
text-align: center;
color: #fff;
background-color: #f50;
border-radius: 4px;
}
.file-group input {
position: absolute;
right: 0;
top: 0;
font-size: 300px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.file-group:hover {
background-color: #f60;
}
</style>
<div class="file-group">
<input type="file" name="" id="J_File">
选择文件
</div>
.file-group {
position: relative;
width: 200px;
height: 80px;
border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
overflow: hidden;
cursor: pointer;
line-height: 80px;
font-size: 16px;
text-align: center;
color: #fff;
background-color: #f50;
border-radius: 4px;
}
.file-group input {
position: absolute;
right: 0;
top: 0;
font-size: 300px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.file-group:hover {
background-color: #f60;
}
</style>
<div class="file-group">
<input type="file" name="" id="J_File">
选择文件
</div>
相关文章推荐
- The CSS3 Placeholder Pseudo-element
- CSS定位规则之BFC 你竟然一直不知道的东西!!!!!
- 布局转换——考验CSS功底的时刻到来
- CSS基础
- CSS 预处理器
- [CSS]IE6和360浏览器兼容模式下的兼容性问题
- 初探CSS 4选择器
- css 关于overflow:hidden对float的影响
- 高性能 CSS3 动画
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
- GridView用CSS设定样式
- css hack
- html+css的高级盒子模型
- 怕忘记了CSS中position的absolute和relative用法
- 用纯CSS实现照片墙
- 通过样式表自定义按钮外观
- css兼容问题
- CSS中文字体如宋体/微软雅黑的英文名称写法
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - :before && :after伪元素