Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> input[type=text] { width: 100px; -webkit-transition: width .2s ease-in-out; -moz-transition: width .2s ease-in-out; -o-transition: width .2s ease-in-out; transition: width .2s ease-in-out; } input[type=text]:focus { width: 150px; background-color: #eee; } </style> </head> <body> <h2>:focus selector example</h2> <form> <label for="search">Search:</label> <input type="text" name="search" id="search"> </form> </body> </html>