实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css form focus 实例 - 自学教程(runoops.com)</title> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 3px solid #ccc; -webkit-transition: 0.5s; transition: 0.5s; outline: none; } input[type=text]:focus { border: 3px solid #555; } </style> </head> <body> <p>在这个实例，我们使用 :focus 选择器，在文本框获取焦点时，设置文本框当边框颜色为黑色。</p> <p>注意，我们使用来 CSS transition 属性来设置边框当颜色 (在 0.5 秒内修改边框当颜色)。</p> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="John"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname" value="Doe"> </form> </body> </html>
运行结果：