Question

I am currently working on a site that utilizes a search function. I have a text box in the top corner and I want to set it so that whenever the user clicks into the box, it extends to twice the length that it currently is. How exactly would I do that? I have searched but cannot find any helpful information.

Answer 1

why don’t you use CSS3 transitions? you could do something like this to make the width of the textbox increase:

input, textarea {  
    width: 280px;  
    -webkit-transition: width 1s ease;  
    -moz-transition: width 1s ease;  
    -o-transition: width 1s ease;  
    -ms-transition: width 1s ease;  
    transition: width 1s ease;  
}  

input:focus, textarea:focus {  
    width: 340px;  
}