html好看的输入框格式,一款漂亮的表单输入框样式

/p>

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

一款漂亮的表单输入框样式

*{

margin:0;

padding:0;

}

body{

font-size:63%;

color:#000;

}

.input_on{

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #999;

background-color:#FFFFCC;

}

.input_off{

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #CCC;

background-color:#FFF;

}

.input_move{

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #999;

background-color:#FFFFCC;

}

.input_out{

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #CCC;

background-color:#FFF;

}

ul.input_test{

margin:20px auto 0 auto;

width:500px;

list-style-type:none;

}

ul.input_test li{

width:500px;

height:22px;

margin-bottom:10px;

}

.input_test label{

float:left;

padding-right:10px;

width:100px;

line-height:22px;

text-align:right;

font-size:1.4em;

}

.input_test p{

float:left;

_margin-top:-1px;

}

.input_test span{

float:left;

padding-left:10px;

line-height:22px;

text-align:left;

font-size:1.2em;

color:#999;

}

  • for="inp_name">姓名:

    id="inp_name" class="input_out" name="" type="text"

    οnfοcus="this.className='input_on';this.οnmοuseοut=''"

    οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"

    οnmοusemοve="this.className='input_move'"

    οnmοuseοut="this.className='input_out'"

    />

    请输入您的姓名

  • for="inp_email">Email:

    id="inp_email" class="input_out" name="" type="text"

    οnfοcus="this.className='input_on';this.οnmοuseοut=''"

    οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"

    οnmοusemοve="this.className='input_move'"

    οnmοuseοut="this.className='input_out'"

    />

    请输入您的Email

  • for="inp_web">网站:

    class="input_out" name="" type="text"

    οnfοcus="this.className='input_on';this.οnmοuseοut=''"

    οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"

    οnmοusemοve="this.className='input_move'"

    οnmοuseοut="this.className='input_out'"

    />

    请输入您的网站

欢迎访问阿里西西网页特效代码站,js.alixixi.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值