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!

cbe460b298883c7f356cf06f11d82f6d

6139445e6344c895bc87843cb8bda8b0225ad63a5584be93da40bb53c752b75d
16b28748ea4df4d9c2150843fecfba68


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

82e4865872727f41d1edae4f463247d6

< ;html xmlns="http://www.w3.org/1999/xhtml">
93f0f5c25f18dab9d176bd4f6de5d30e
97f2b6ae5f4f65bc7d15c6c9b9e8be8c
b2386ffb911b14667cb8f0f91ea547a7nav6e916e0f7d1e588d4f442bf645aedb2f
b4debeaa3f14f123a8a4958c77f8fd532cacc6d41bbb37262a98f745aa00fbf0
ecd0825116c9bea277314a412469a79d2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
cbe460b298883c7f356cf06f11d82f6d
21515f6f18300cf361ce98e28a155df9b25b4a86a53d7354685710a055dc4c90
16b28748ea4df4d9c2150843fecfba68
dbf4a1b9d12965251b02d12dd197d73e
73a6ac4ed44ffec12cee46588e518a5e


#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