|
在日常重构中，form表单家族中的 upload field 在使用 css
美化时令人头疼！默认情况下，各个浏览器下的表现层次不齐，无组织、无纪律啊！如下图所示，让我等情何以堪。
解决方法，css美化：
html代码：
<form>
<a href="javascript:void(0);"
class="btn_addPic"><span><em>+</em>添加图片</span><input
type="file" tabindex="3" title="支持jpg、jpeg、gif、png格式，文件小于5M"
size="3" name="pic"
class="filePrew"></a>
</form>
css代码：
a{text-decoration:none;}
.btn_addPic{
display:
inline-block;
position:
relative;
height:
39px;
overflow:
hidden;
padding: 0
30px;
border: 1px solid
#EBEBEB;
background: none repeat
scroll 0 0 #F3F3F3;
color:
#999999;
font: 14px/39px
'MicroSoft Yahei','Simhei';
cursor:
pointer;
text-align:
center;
}
.btn_addPic em
{
background:url(add.png) 0
0;
display:
inline-block;
width:
18px;
height:
18px;
overflow:
hidden;
margin: 10px 5px 10px
0;
line-height:
20em;
vertical-align:
middle;
}
.btn_addPic:hover
em{
background-position:-19px
0;}
.filePrew {
display:
block;
position:
absolute;
top: 0;
left: 0;
width:
140px;
height:
39px;
cursor:
pointer;
opacity: 0;
filter:alpha(opacity:
0);
}
美化后的效果：
|
