主页
CSS
CSS 表单
trycss_form_focus2
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <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 过渡属性来为边框颜色设置动画（需要 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>