搜索框向左变宽

改变宽度,只向`左边方向`变宽是怎么样现实的;

加个长宽度的类，然后transition

可以在那个网页查看元素，查看其实现方法。

如果不考虑到兼容问题，使用css3实现：:focus宽度变宽。
只向左边变宽：搜索框input添加绝对定位，相对定位的父级宽度固定，right位置固定，
搜索框添加过度：transition: width XXXs

这貌似是 bilibili 官网。绑定相应的事件函数，无外乎在触发的时候改变包含input的框的div的 width 的值嘛。样式的话，楼上说的右浮动是个参考。

为了方便快速展示用jquery写了一个demo，题主可以参考一下，search就是input id啦。

Jquery code

$(function(){
  var swidth =  $('#search').width();
    $('#search').focus(function(){
      $(this).animate({width:(swidth +50)+"px"},800);
  })
      $('#search').blur(function(){
      $(this).animate({width:(swidth) +"px"},800);
  })
})

css

#search{
   position:absolute;
   right:0;
}

:focus的时候改变宽度，然后在加上transition: width 1s;

向右浮动，右侧固定了，js改变宽度就行，试试
或者css3的动画功能也行

【热门文章】

搜索框向左变宽

改变宽度,只向左边方向变宽是怎么样现实的;

改变宽度,只向`左边方向`变宽是怎么样现实的;