以上的这种文本框效果，可以通过CSS定义来实现，从而让文本框可以根据不同的状态进行样式的转换，使页面更加人性化。
关于文本框的CSS代码：
/*注册验证 begin*/
.inputbox {float:left;width:186px;margin-right:10px;}
.inputbox .input {
float:left;
width:10px;
height:24px;
line-height:24px;
margin:3px 5px 3px 0;
background-image: url(../images/reg_btn.gif);
background-position: left -135px;
}
.inputbox .input cite {
float:left;
height:24px;
line-height:24px;
margin-left:10px;
padding:2px 10px 0 0;
width:160px;
font-family:"宋体";
font-style:normal;
background-image: url(../images/reg_btn.gif);
background-position: right -164px;
}
.inputbox .input input{ background:#ffffef; width:100%; height:18px; line-height:18px; padding:2px 2px 0 0; border:0;font-family:Verdana,"宋体";}
.inputbox .inputGreen {float:left;width:10px;height:30px; line-height:30px; background-image: url(../images/reg_btn.gif);background-position: left -193px; margin:3px 5px 3px 0;}
.inputbox .inputGreen cite {
float:left;
height:26px;
line-height:30px;
margin-left:10px;
width:160px;
font-family:"宋体";
font-style:normal;
background-image: url(../images/reg_btn.gif);
background-position: right -228px;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0;
}
.inputbox .inputGreen input{
background:#ffffef;
width:100%;
height:18px;
line-height:18px;
border:0;
font-family:Verdana,"宋体";
padding-top: 2px;
padding-right: 2px;
padding-bottom: 0;
padding-left: 0;
}
.inputbox .inputRed {
height:30px;
line-height:30px;
float:left;
width:10px;
background-image: url(../images/reg_btn.gif);
background-position: left -263px;
margin:0 5px 0 0;
}
.inputbox .inputRed cite {
float:left;
height:26px;
line-height:30px;
margin-left:10px;
padding:2px 10px 0 0;
width:160px;
font-family:"宋体";
font-style:normal;
background-image: url(../images/reg_btn.gif);
background-position: right -298px;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0;
}
.inputbox .inputRed input{ background:#ffffef; width:100%; height:18px; line-height:18px; padding:2px 2px 0 0; border:0;font-family:Verdana,"宋体";}
/*注册验证 end*/
网页代码如下：
<DIV class=formRow>
<DIV class=formLabel>用户名验证：</DIV>
<DIV class="formField">
<div class="inputbox"><span class="input"><cite><input id="username" name="username" type="text" maxlength="16" alt="首尾不能是下划线/全部怪字符" value="" /></cite></span></div>
</div>
<DIV class=formClew>
<div id="ctl00_cph_main_right" style="display:''" class=check_ing>正在检测用户名是否可以使用</div>
</DIV>
<DIV class=formRow>
<DIV class=formLabel>用户名验证：</DIV>
<DIV class="formField">
<div class="inputbox"><span class="inputGreen"><cite><input id="username" name="username" type="text" maxlength="16" alt="首尾不能是下划线/全部怪字符" value="" /></cite></span></div>
</div>
<DIV class=formClew>
<div id="ctl00_cph_main_right" style="display:''" class=check_ok>用户名可以使用</div>
</DIV>
<DIV class=formRow>
<DIV class=formLabel>用户名验证：</DIV>
<DIV class="formField">
<div class="inputbox"><span class="inputRed"><cite><input id="username" name="username" type="text" maxlength="16" alt="首尾不能是下划线/全部怪字符" value="" /></cite></span></div>
</div>
<DIV class=formClew>
<div id="ctl00_cph_main_right" style="display:''" class=check_err>用户名已被注册</div>
</DIV>
其中控制文本框背景的图片如下：
reg_btn.gif
