上面的CSS其实还是CSS2的内容,现在我们开始增加一点CSS3的特有内容,代码如下:
input, textarea {
width:439px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
width:439px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
这里,留意到添加的最后三行的代码,其作用都是为了实现圆角文本框CSS,其中border-radius:5px;是在Opera下起作用,-webkit-border-radius:5px;
在Chrome和Safrai下起作用,而-moz-border-radius:5px;在Firefox下起作用,运行后看到效果如下图:

▲
同时我们期望当用户将焦点定位在某个文本输入框时,文本框的外边框的颜色变为蓝色,以提醒用户注意,要实现这个效果的话,可以在focus样式下做文章,如下:
input:focus, textarea:focus {
border:1px solid #97d6eb;
}
border:1px solid #97d6eb;
}
运行效果如下图:

▲
最后我们设计下自定义的提交按钮,CSS代码如下:
#submit {
width:127px;
height:38px;
background:url(images/submit.jpg);
text-indent:-9999px;
border:none;
margin-top:20px;
cursor:pointer;
}
#submit:hover {
opacity:0.9;
}
width:127px;
height:38px;
background:url(images/submit.jpg);
text-indent:-9999px;
border:none;
margin-top:20px;
cursor:pointer;
}
#submit:hover {
opacity:0.9;
}
这里,我们除了定义提交按钮的宽度和高度外,还指定了自定义的提交按钮的图片,这里用了一个小技巧,text-indent:-9999px;能去掉原先按钮本身的文字。最后,使用CSS3的hover属性,指定了opacity为0.9,即当鼠标移动到提交按钮上时显示的透明度,可惜这个属性IE是不支持的,其他大部分浏览器都支持。
结合PHP让表单生效
最后,我们结合PHP让这个表单真正起作用,这个还是比较简单的,除了在form表单中新增post路径外,就是在接收表单内容页中用$_POST接收即可,如下代码所示:
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: TangledDemo';
$to = 'contact@tangledindesign.com';
$subject = 'Hello';
?>
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: TangledDemo';
$to = 'contact@tangledindesign.com';
$subject = 'Hello';
?>
当然,可以在PHP的代码中,增加更多的功能,比如数据的服务端校验功能等,这里本文不再详细介绍。