2006-09-12
前些日子整理伪对象伪元素，发现个好东西，总结一下，拿出来帖在这里：
<?xml version="1.0" encoding="gb2312"?>
<!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>更加易用且人性化的表单样式</title>
<style type="text/css">
<!--
body {
font-family: "宋体";
font-size: 12px;
}
#logonForm {
background: #333;
padding: 3px;
text-align: center;
width: 350px;
color: #FFF;
}
input {
font-size: 12px;
background: #FFF;
border: 2px solid #000;
padding: 1px;
}
input:hover,input:focus:hover {
font-size: 12px;
border: 2px solid #F60;
}
input:focus {
font-size: 12px;
border: 2px solid #F90;
}
-->
</style>
</head><body>
<form id="logonForm" name="logonForm" method="post" action="">
用户名：
<input name="id" type="text" size="12" />
密码：
<input name="password" type="text" size="12" />
<label>
<input name="Submit" type="submit" value="登录" />
</label>
</form>
</body>
</html>
只是给input加了个:focus属性，它就能在用户输入资料时感受到奇特的交互效果。非常有用不是么？
