CODEWITHSUNDEEP
javascripttextbox
user1236370
user1236370

Reputation:

How to extend the size of a text box when clicked into?

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.

Upvotes: 0

Views: 1808

Answers (1)

aliirz
aliirz

Reputation: 1004

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;  
}

Upvotes: 1

Related Questions