<!DOCTYPE html> <html lang="en"> <head> <title> CSS Form Focus </title> <meta charset="UTF-8"> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; -webkit-transition: 0.5s; transition: 0.5s; outline: none; } input[type=text]:focus { border: 3px solid blue; } </style> </head> <body> <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="Snow"> </form> </body> </html>
