- ·上一篇文章:通用的CSS滑动门技术实现TAB标签代码
- ·下一篇文章:网站整页变灰的方法
如何修改file表单的样式
如何修改file表单的样式?客户给定一个样式,要求我将file表单的样式改成他提供的那种样式----前面是一个蓝色的边框的文本框,后面的浏览按纽改成一个给定的图片。
看到这个功能,第一个想法就是模拟,使用文本框加图片模拟file表单,因为file表单后面的按纽上的文字(浏览...)和图片是不可改的,也不可以使用css设置的。
<
!--
************************************
功能:模拟file表单,设置其样式
来源:网络
整理与修改:www.aspprogram.cn
************************************
-->
<
style>
input
{border:1px solid
#333333
color:
#666666
background:
#eeeeee
font:normal 12px Tahoma
height:18px}
<
/style>
<
form method="post" action="11.asp" enctype="multipart/form-data">
<
input id="f_file" style="border:1px solid
#0000ff
">
&
nbsp
<
input type="button" value="" style="background-image:url('fasong.jpg')
width:60px
height:19px
">
<
input name="upload" type="file" style="position:absolute
filter:alpha(opacity=0)
width:30px
" id="t_file" hidefocus>
<
br>
<
input type="submit" value="提交">
<
/form>
<
script>
function fclick(obj)
{
 
with(obj)
{
 
 
 
style.posTop=event.srcElement.offsetTop
 
 
 
var x=event.x-offsetWidth/2
 
 
 
if(x<
event.srcElement.offsetLeft)x=event.srcElement.offsetLeft
 
 
 
if(x>
event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth)x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth
 
 
 
style.posLeft=x
 
}
}
<
/script>
如何修改file表单的样式