Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Div+CSS > 关于input-file完美修改CSS样式方案,解决思路
隐藏/显示侧边栏

关于input-file完美修改CSS样式方案,解决思路

2014-05-05 13:38    来源:未知    责任编辑:admin    字号【
改变一般的input的样式很简单,可是改变type为file的input时确很让人头痛,甚至网上解决方案也各种。有JS的解决方案,当然不建议用JS。原因是:没那个必要。

改变input file样式,修改input file样式的思路
1.外边套用一层,对外面那层进行CSS样式修改,一般为span,或div,当然可以用其他的。注意:position为relative;并且overflow:hidden 很关键。
2.里层,也就是input file为position为abosolute,撑开到外层,让它能充满到外层点击。宽高可以更大点无所谓,也可以刚好。还有注意要input file要透明。

详细代码如下:

CSS部分:
<style type="text/css">
.filebtn{
width:64px;
height:26px;
display:inline-block;
border:1px solid #ccc;
line-height:26px;
background:#0a83ff;
color:white;
text-align:center;
overflow:hidden;
position:relative;
}

.fbtn{
font-size: 118px;
width:80px;
height:40px;
cursor: pointer
;position: absolute;
right: 0;top: 0;
opacity: 0;
filter:alpha(opacity=0);

    </style>


HTML部分:
<span class="filebtn"><input class="fbtn" type="file"  />浏览</span>

如何给行内元素设置宽高,背景分析与实现方法!


更多
Tags 标签: 修改file样式 改变file样式
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |