How to disable background when i click search icon?

Question

I have been created simple search box, when i click, it will extended at horizontal.

May i know, how to extend vertically, when i click instead of horizontal.

<form action="search.php" autocomplete="on">
      <input id="search" name="search" class="search-box" type="text" 
          placeholder="What you are looking for?">
      <input id="search_submit" value="" type="submit">
</form>

DEMO

I need to access my search icon link this link have search icon.. i mean, when i click my search icon, it will show text line and background should be in active..

possible duplicate of [how to expand a text area when click on](http://stackoverflow.com/questions/5648464/how-to-expand-a-text-area-when-click-on) — Ben Fortune, May 19 '15 at 09:29

score 0 · Answer 1 · answered May 19 '15 at 07:01

Try this:

jQuery(function() {
    jQuery('#search').focus(function() {
        jQuery(this).animate({ height: '200px', backgroundColor: '#fff' });
    }).blur(function() {
        jQuery(this).animate({ height: '100px', backgroundColor: '#999' });
    });
});

Demo

score 0 · Answer 2 · answered May 19 '15 at 07:01

Just use height instead of width.

jQuery(function() {
    jQuery('#search').focus(function() {
        jQuery(this).animate({ height: '100px', backgroundColor: '#fff' });
    }).blur(function() {
        jQuery(this).animate({ height: '20px', backgroundColor: '#999' });
    });
});

score 0 · Answer 3 · edited May 23 '17 at 11:58

based on your question I assume that you are looking for Search Box with Multi-Line Support right? If yes, then just with adding the 'HEIGHT' will not help you, because still you will be allowed to enter in one single line only.

If at all you need MultiLine Support then use the TEXTAREA instead of TEXTBOX.

For further reference, you can check some of the similar SO Question(s) like: Multiple lines of input in <input type="text" />

Forked your JS fiddle code with modifications: Here is the link: http://jsfiddle.net/btmv9kyy/

HTML

    <textarea id="search"></textarea>

jQuery Code

    jQuery(function() {
        jQuery('#search').focus(function() {
            jQuery(this).animate({ width: '100px',height: '300px', backgroundColor: '#fff' });
        }).blur(function() {
            jQuery(this).animate({ width: '100px', height: '100px', backgroundColor: '#999' });
        });
    });

CSS

    #search {
        background-color: #999;
        width: 100px;
        height:100px;
        border: 1px solid #ddd;
        outline: none;
    }

Hope this helps.

How to disable background when i click search icon?

3 Answers3