当前位置:K88软件开发文章中心编程语言Css/Css3Css/Css301 → 文章内容

如何修改file表单的样式

减小字体 增大字体 作者:佚名     来源:asp编程网  发布时间:2018-12-30 8:49:21

如何修改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表单的样式