CSS to Expand Search Box, When Mouse Move Over

By | July 19, 2013

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.


CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#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;
}
FULL CODING
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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>

<body style="padding:50px;">
<input type="text" id="text" />
</body>
</html>

3 thoughts on “CSS to Expand Search Box, When Mouse Move Over

Leave a Reply

Your email address will not be published. Required fields are marked *

interproportional-lozenge