网页输入框的样式触发的效果
今天图老师小编要向大家分享个网页输入框的样式触发的效果教程,过程简单易学,相信聪明的你一定能轻松get!
!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
html
head
metahttp-equiv="Content-Type"content="text/html;charset=gb2312"
title/title
/head
body
styletype="text/css"
.input1{
font-family:verdana;background-color:#EEEEEE;border-bottom:#FFFFFF1pxsolid;border-left:#CCCCCC1pxsolid;border-right:#FFFFFF1pxsolid;border-top:#CCCCCC1pxsolid;font-size:12px;
}
.input1-bor{
font-family:verdana;background-color:#F0F8FF;font-size:12px;
border:1pxsolid#333333;}
/style
tablecellspacing=2cellpadding=0width=300border=0
tr
tdfontclass="en1"姓名:/font/td
tdinputsize=40name=nameclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"
/td
/tr
tr
tdfontclass="en1"邮箱:/font/td
tdinputsize=40name=emailclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"/td
/tr
tr
tdfontclass="en1"网址:/font/td
tdinputsize=40name=urlclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"
/td
/tr
tr
tdfontclass="en1"主题:/font/td
tdinputsize=40name=subjectclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"
/td
/tr
tr
tdfontclass="en1"内容:/font/td
tdtextareaname=messagerows=5cols=35class="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"/textarea/td/tr/table
/body
/html