任意美化你的文件域 <input type="file" />

最新推荐文章于 2023-09-09 22:45:42 发布

lijun_xiao2009

最新推荐文章于 2023-09-09 22:45:42 发布

阅读量6.9k

点赞数 1

分类专栏： html

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

第一种方法：

样式：

.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
.upfile{position:absolute;top:-100px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}

HTML:

<span class="tip left" id="upfileResult">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>

第二种方法：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>更改文本域的样式-用input模拟文本域</title>
<style>
*{margin:0;padding:0;}
input{border:none;border:1px solid #CCC;vertical-align:middle; }
.input {height:24px; line-height:24px; border-right:none; width:200px;}
.liulan {width:100px;height:26px;background:url(/jscss/demoimg/201206/bgimg.jpg) no-repeat; cursor:pointer;}
.files{ position:absolute; left:202px; top:52px; heigth:26px;cursor:pointer;
   filter: Alpha(opacity=0);
     -moz-opacity:0;
     opacity:0;
  }
</style>
</head>
<body>
<BR>
<BR>
<BR>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt" class="input"><input type="button" οnmοusemοve="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="浏ff览" size="30" οnclick="f.click()" class="liulan">
<input type="file" id="f" οnchange="txt.value=this.value" name="f" style="height:26px;" class="files" size="1" hidefocus>
</form>
<BR>
<BR>
<BR>
<BR>
</body>
</html>

第三种方法：

CSS代码

<style>
input{border:1px solid #ff9900;}
div {width:300px;position:relative;}
p {float:left}
.file {position:absolute;top:20px;right:300px;top:0;
right:73px;width:0px;height:30px;filter:alpha(opacity=0);
-moz-opacity:0;opacity:0;}
#txt {height:20px;margin:1px}
#ii {width:70px;height:24px;margin-top:1px;
margin-top:2px;_margin-top:2px;}
</style>

HTML代码

<div>
<form method="post" action="" enctype="multipart/form-data">
<p><input type="text" id="txt" name="txt" /></p>
<p><input id="ii" type="button" value="选择文件" /></p>
<p><input type="file" οnchange="txt.value=this.value" class="file" />
</p>
</form>
</div>

lijun_xiao2009

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
任意美化你的文件域 <input type="file" />

第一种方法：样式：.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}.upfile{position:absolute;top:-100
复制链接

扫一扫