Question

如果您转到http://apple.com并在搜索框中点击，您会发现它会增长/放大onfocus，而onblur会折叠回原始状态。

我想知道是否有一个jquery插件或类似的轻松完成这项工作。

我不想使用Apple网站上的JS，因为它不是完全跨浏览器的。我也没有时间自己动手。如果没有任何预制，那没关系，但如果有人知道任何预制，我会非常感激。

Answer 1

在没有JS的apple.com上搜索框： http://www.kvadracom.com/en-projects-blog.html#1

Answer 2

已经有一段时间了，这是另一篇SO帖子：

Mimic apple.com globalsearch input field with HTML and CSS

Answer 3

我想你想要这样的东西。它在IE，firfox，chrome工作。我没有检查其他人

$('input').focus(function() {
         $(this).css({'width': '50px'});
});

$('input').blur(function() {
         $(this).css({'width': '100px'});
 });

同样，您可以使用background-color属性在颜色之间切换

-----按OP ---

编辑

我将此标记为答案，但我确实将其修改为更像Apple网站。

$('input').focus(function() {
         $(this).animate({width: 150}, 'slow');
});

$('input').blur(function() {
         $(this).animate({width: 100}, 'slow');
 });

Answer 4

看看这篇文章我认为它可以在一定程度上帮助你......点击时搜索框不会得到焦点，但它的大小会增加...... http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/

放大搜索框类似于Apple.com上的搜索框

4 个答案:

-----按OP ---