<<  [原]重构工程师，我们如何工作 | 首 页 | [原]原创是件辛苦的事  >>
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属性，它就能在用户输入资料时感受到奇特的交互效果。非常有用不是么？





Tag: CSS 交互 用户体验 可用性

评论

  • ie6都不行。这点不好。

    ping () 发表于 2008-12-30 17:44:41

  • 不错，就是IE支持略差一点点。^_^

    sunhy () 发表于 2006-09-12 14:27:36

发表评论

 姓名：
 E-mail：
 地址：
   


 
@ 14:06:37 | 引用 0 | 编辑