CSS to Expand Search Box

In most of the search box when we move mouse over on searchbox, it will expand. Here is the css coding for expanding search box,
when mouse mouse over.

View Demo

CSS

[code type=css]
#text
{
border:2px solid #963;
padding: 3px;
height: 34px;
width: 242px;
transition: 800ms all ease;
}
#text:hover
{
width:280px;
border:2px solid #963;
transition: 800ms all ease;
}
[/code]

FULL CODING

[code type=html]
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”>
</script>
<style type=”text/css”>
#text
{
border:2px solid #963;
padding: 3px;
height: 34px;
width: 242px;
transition: 800ms all ease;
}
#text:hover
{
width:280px;
border:2px solid #963;
transition: 800ms all ease;
}
</style>
</head>