<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100px;
-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
</style>
</head>
<body>
<p>Set the width of the input field to 100 pixels. However, when the input field gets focus, make it 250 pixels wide:</p>
Search: <input type="text" name="search">
</body>
</html>