it looks alot of code but all its doing is takeing a input field id = search_input.
and setting width to 100. than if you click on field than change the width to 200. and last make it animate.
so its a small field if you click on it. it will animte to longer field.

this bottom code will animte fild from left. side. so right side will stay at the postion and left side will get longer. but i want it so left side stay same. and right side get longer. if this is not making since let me know ill explain more.

html file

<input type='text' name='Search' id='search_input' value='Search...'/>








#search_bar input[type="text"] {
    background: url(../IMAGE/search-white.png)no-repeat 10px 5px #444;
   border:1px solid #999;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search_bar input[type="text"]:focus {
    background: url(../IMAGE/search-dark.png) no-repeat 10px 5px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

Recommended Answers

All 9 Replies

Member Avatar for LastMitch

@hwoarang69

this bottom code will animte fild from left. side. so right side will stay at the postion and left side will get longer. but i want it so left side stay same. and right side get longer. if this is not making since let me know ill explain more.

I got no idea what you want to do?

If you just want to make the left side longer than change the width.

I believe i know what he wants...

Try following this tutorial:
Click Here

Here is the demo of what the tutorial follows:
Click Here

which code are you refering to?

that link helped me alot thanks michael

I'll bookmark that one. Nice jsfiddle.

please don't credit me... you can a little (because i found it for you :) )... credit the person who designed the tutorial :)

Is this solved?

Have you gotten this question answered?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.