php 表单 漂亮css,一款漂亮的表单输入框CSS样式

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

(2011-07-30 12:56:58)

标签：

输入框css样式

it

分类：

技术

/p>

Strict//EN"

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

xmlns="http://www.w3.org/1999/xhtml">

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

*{

margin:0;

padding:0;

}

body{

font-size:63%;

color:#000;

}

.input_on, .input_move{

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #999;

background-color:#FFFFCC;

}

.input_off,.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

分享：

喜欢

0

赠金笔

加载中，请稍候......

评论加载中，请稍候...

发评论

登录名： 密码： 找回密码 注册记住登录状态

昵   称：

评论并转载此博文

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。