This tutorial shows how to make a expanding search box on focus using css3.In this tutorial we will be using transitions, border-radius feature of the css3.If the css3 is not supported in the browser also it works in which the rounded corner and transition animations wont be available.
Technologies Used:
- CSS - transitions, border-radius
Check out the working demo of the search box.This css search box is for begginers and code is in a simplified form.Various effects could be added further based on requirement.
HTML CODE:
<form class="form-wrapper" action="s.php">
<input type="text" id="search" placeholder="Enter your Keyword">
<input type="submit" value="Search" id="submit" width="32" height="32" src="search.png">
<div class="hider"></div>
</form>
CSS CODE:
.form-wrapper
{
position:absolute;
margin-top:200px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
z-index:11;
}
form input[type=submit] {
background : url("search.png") no-repeat center center;
width : 52px;
height :32px;
border : none;
color : transparent;
font-size : 0;
cursor:pointer;
background-color:#0fb8c6;
}
#search
{
height: 32px;
width: 200px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
color:black;
padding:0px;
margin:0px;
font: 15px sans-serif;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
border:1px dashed #1b7883;
background-color:#ffffff;
}
#search:focus
{
width:300px;
border: 1px solid #1b7883;
}
#search:focus + #submit
{
left:248px;
}
#submit
{
position:absolute;
top:1px;
left:148px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
Our expanding css3 search box is ready. For any queries leave me a comment below.
