定义input type=file 样式的方法
原始的file控件是这样的:
别以为这个是由一个text和一个button组合成的,它是一个控件,htML代码为:
复制代码代码如下:
input tyPE="file" name="file" />
既然这样我们就用一个text和一个button来显示这个file的样式,html代码是这样:
复制代码代码如下:
div class="file-box">
form action="" method="post" enctype="multipart/form-data">
input type='text' name='textfield' id='textfield' class='txt' />
input type='button' class='BTn' value='浏览...' />
input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
input type="submIT" name="submit" class="btn" value="上传" />
/form>
/div>
外面的一层div是为了给里面的input提供位置参考,因为写样式的时候需要相对定位,使真正的file控件覆盖在模拟的上面,然后隐藏掉file控件(即使file控件不可见),所以css代码是这样的:
复制代码代码如下:
.file-box{
position:relative;
width:340px}
.txt{
height:22px;
border:1px solid #cdcdcd;
width:180px;
}
.btn{
background-color:#FFF;
border:1px solid #CDCDCD;
height:24px;
width:70px;
}
.file{
position:absolute;
top:0;
right:80px;
height:24px;
filter:alpha(opacity:0);
opacity: 0;
width:260px }
效果图:
最后留下一个DEMO:点击查看demo
!DOCTYPE html>
html>
head>
meta http-equiv="Content-type" content="text/html;
charset=utf-8" />
title>
定义input type="file" 的样式/title>
style type="text/css">
body{
font-Size:14px;
}
input{
vertical-align:middle;
margin:0;
padding:0}
.file-box{
position:relative;
width:340px}
.txt{
height:22px;
border:1px solid #cdcdcd;
width:180px;
}
.btn{
background-color:#FFF;
border:1px solid #CDCDCD;
height:24px;
width:70px;
}
.file{
position:absolute;
top:0;
right:80px;
height:24px;
filter:alpha(opacity:0);
opacity: 0;
width:260px }
/style>
/head>
body>
div class="file-box">
form action="" method="post" enctype="multipart/form-data">
input type='text' name='textfield' id='textfield' class='txt' />
input type='button' class='btn' value='浏览...' />
input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
input type="submit" name="submit" class="btn" value="上传" />
/form>
/div>
/body>
/html>
ffcod = delpost.runcode7 .value;
ffcod = ffcod.replace(/
/g,'');
delpost.runcode7 .value = ffcod;
提示:您可以先修改部分代码再运行
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 定义input type=file 样式的方法
本文地址: https://pptw.com/jishu/587759.html