We would like to know how to focus to animated expanding search input.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.search-form {<!-- w w w . ja va 2 s . co m-->
height: 35px;
width: 100%;
margin: 0 auto;
padding: 10px 0;
background-color: #ccc;
}
.search {
border-radius: 5px;
padding: 5px;
width: 95px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
float: right;
outline: none;
border: 1px solid #ddd;
margin-right: 20px;
}
.search:focus {
width: 210px;
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}
</style>
</head>
<body>
<form class="search-form" method="post" action="">
<input class="search" type="search" placeholder="Recherchez">
</form>
</body>
</html>
The code above is rendered as follows: