CSS美化 input type=”file代码,Css代码库,德仔网

代码语言

代码分类

【Css】 CSS美化 input type=”file

作者:Dezai.CN / 发布于2013/1/25/ 842

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页特效 js使用cookie记录最近浏览记录功能</title>
<style>
.btn_addPic{  
display: block;  
position: relative;  
width: 90px;  
height: 31px;  
overflow: hidden;  
border: 0px solid #EBEBEB;  
/*background: none repeat scroll 0 0 #F3F3F3;  */
background:url(../images/buttom1.gif) no-repeat right;
color: #999999;  
cursor: pointer;  
text-align: center;  
}  
.btn_addPic span{display: block;line-height: 31px;}  
.btn_addPic em {  
background:url(../images/t014ce592c1a0b2d489.png) 0 0;  
display: inline-block;  
width: 18px;  
height: 18px;  
overflow: hidden;  
margin: 4px 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: 90px;  
height: 31px;  
font-size: 12px; /* 增大不同浏览器的可点击区域 */  
opacity: 0; /* 实现的关键点 */  
filter:alpha(opacity=0);/* 兼容IE */  
}
</style>


<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<input type="text" datatype="*" name="files" id="hiddenfile" value="" disabled="disabled"><a class="btn_addPic" href="javascript:void(0);"><span><em>+</em>提交文件</span> <input class="filePrew" title="支持jpg、jpeg、gif、png格式，文件小于5M" tabIndex="3" name="pic" size="3" type="file" onChange="document.getElementById('hiddenfile').value = this.value"></a>
</body>
</html>

试试其它关键字

　美化input　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)