转载自:http://xiaocaochenfei.blog.sohu.com/40726860.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>fieldset,input:focus的应用</title>
<style>
*{margin: 0;padding:0;}
body {font: 12px Verdana, "Trebuchet MS", Geneva, sans-serif;line-height: 1.6em;color: #0C344D; background-color: #FFF;}
fieldset{border: none;border-top: 1px solid #DA5BA4; width: 500px; margin-left: 30px;}
legend{font-weight: bold;color: #124E74;}
label {margin: 8px 0 0 8px;display: block;}
input, textarea, select {
margin: 4px 8px; padding: 2px 4px;
border-top: none; border-bottom: 4px solid #7FBAE7;
border-right: none; border-left: 1px solid #7FBAE7;
color: #124E74;
background: url(http://f.thec.cn/binglanzhixuan/CSS/images/marco_input.gif) top right no-repeat;
}
textarea { height: 140px; }
input:focus, textarea:focus, select:focus { border-bottom: 4px solid #124E74; }
#name { width: 220px; }
#email { width: 220px; }
#subject { width: 360px; }
#text { width: 360px; height: 140px; }
.check{background:none;border:none;}
</style>
</head>
<body>
<fieldset>
<legend><img src="http://f.thec.cn/binglanzhixuan/CSS/images/tagemail.gif" alt="e-mail"></legend>
<label for="name">您的姓名:</label><input name="name" id="name" maxlength="40" value="" type="text"><br />
<label for="email">您的邮箱:</label><input name="email" id="email" maxlength="80" value="" type="text"><br />
<label for="text">给我留言:</label><textarea name="text" id="text" rows="8" cols="60"></textarea><br />
<label for="copymail" style="display: inline;">以后都用此姓名给我留言:</label><input name="copymail" id="copymail" value="copymail" class="check" type="checkbox">
<input class="botonimg" src="http://f.thec.cn/binglanzhixuan/CSS/images/bot_enviarmail.gif" value="enviar e-mail" title="Enviar e-mail" style="margin: 18px 0pt 0pt 8px;" alt="Enviar" type="image">
</fieldset>
</body>
</html>