The input box increases after clicking_html/css_WEB-ITnose

As the title states, the input box increases after being clicked, mainly because the background image of the input box needs to undergo a sliding process when it increases.

Reply to the discussion (solution)

You need to use jquery,

$('#输入框ID').click(function(){  $("#输入框ID").animate({     width: "200px",    height: "50px",     fontSize: "18px",     borderWidth: "2px"  }, 1000 );});//具体数值你根据你自己的要求来

The background image is the same

Need to use jquery,
JScript code

$('#Input box ID').click(function(){ $("#Input box ID").animate({ Width: "200px",
Height: "50px",
Fontsize: "18px",
BorderWidth: "2px"
}, 1000);
// The specific values ​​are based on your own requirements...
That's right. . Generally CSS3 supports animation. . If it is not supported, it can only be written in JS. The above JS is available!

Can you write a detailed one? I just tried it but it didn’t work. I don’t know why.

< ;html xmlns="http://www.w3.org/1999/xhtml">

#search{ float:right; height:26px;padding:9px 20px 0 0;}
#search_input{background:url(.. /imagegs/01.png) no-repeat left top;padding:2px 0 2px 12px;height:22px;line-height:22px; float:left;color:#fff;}
.search_button{ float:left; width:37px; height:26px;background:url(../imagegs/01.png) no-repeat right top; cursor:pointer;}


I wrote the above jquery to search. js inside

$().ready(function(e) {

var w = $("#search_input").width();
var h = $("#search_input" ).height();
$("#search_input").focus(function() {
var me = $(this);
var size = 5;
me.animate(
{
width : w size,
height : h size
}
);
}).blur(function() {
$(this).animate(
{
width : w,
height: h
}
);
});

If you click to enlarge, where is the width defined?

Size You can define how much to increase. The width is increased from the previous width