实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width:500px;
}
input[type=text]{
border:1px solid #afafaf;
padding:20px;
border-width:2px;
width:100%;
box-sizing:border-box;
-webkit-transition:0.5s; /*chrome 浏览器平滑过渡*/
transition:0.5s; /*平滑过渡0.5秒*/
outline:none; /**/
}
input:focus{
border:2px solid green;
}
</style>
</head>
<body>
<div>
<p>在本例中，我们使用了：focus选择器，在文本字段获得焦点时（被点击）为其添加添加黑色边框：请注意，我们已添加CSS过渡属性以设置边框颜色的动画（改变着色需0.5秒）。</p>
<form accept="" name="input" target="get">
<table for="fname">Frist Name</table>
<input id="fname" name="First Name" type="text"></input>
<table for="lname">Last Name</table>
<input id="lname" name="last Name" type="text"></input>
</form>
</div>
</body>
</html>运行效果：
评论