Javascript 为什么集中时输入会移动？

我有一个div围绕着一个输入和一个按钮，每当输入被聚焦时，它就会移动。我怎样才能让它停止移动

这是我的html：

<div class="search">
  <div class="input-container">
    <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" />
    <button type="submit" class="search-button">Search</button>
  </div>
</div>

下面是我的js/jquery：

$('input').focus(
function(){
    $('.input-container').addClass('is-focused');
}).blur(
function(){
    $('.input-container').removeClass('is-focused');
});

我还有一把小提琴，你可以在聚焦时看到输入移动。

你可以改变

 .is-focused{
    border-style: solid;
    border-color: #986fa5;
  }

到

可以看到

使用大纲

 .is-focused{
    outline-style: solid;
    outline-color: #986fa5;
  }

演示：

或使用负边距（不推荐）：

或盒子阴影

 .is-focused {
   box-shadow: 0  0 0 3px #986fa5;
  }

---

这是因为边框的大小，所以可以使用

:before

伪元素和

位置：绝对以解决问题


$（'input'）.focus（函数（）{$（'input-container'）.addClass（'is-focused'）；}）.blur（函数（）{$（'input-container'）.removeClass（'is-focused'）；}）
body{margin:10px；}
输入{
填充：0；
边界：0；
文本缩进：5px；
}
输入：焦点{轮廓宽度：0px；}
.是焦点{位置：相对；}
.重点：之前{
内容：''；
位置：绝对位置；
顶部：0；左侧：0；底部：0；右侧：0；
边框样式：实心；
边框颜色：#986fa5；
}
.search*{height:35px；}
.searchbar{宽度：450px；}

搜寻
A按元素的边框宽度展开元素，而an则不展开元素。只需用边框替换轮廓，跳跃将被删除


$（'input'）。焦点（函数（）{
$（'.input container'）.addClass（'is-focused'）；
}).blur（函数（）{
$（'.input container'）.removeClass（'is-focused'）；
});
正文{
利润率：10px；
}
输入{
填充：0；
边界：0；
}
.专注{
轮廓样式：实心；
轮廓颜色：#986fa5；
}
输入：焦点{
轮廓宽度：0px；
}
.搜索*{
高度：35px；
}
/*.搜索按钮{
位置：绝对位置；
}*/
.搜索栏{
宽度：450px；
}

搜寻
这是因为您使用了边框。边框将移动元素。查看使用大纲的答案，这不会移动您的元素。这有效。为什么边框会让它移动？@user3494047基本上是因为边框会占用页面空间，而轮廓不会。这是一些你不会马上知道的事情，但这是一篇关于它的文章，也是一个关于它的答案。
 .is-focused{
    outline-style: solid;
    outline-color: #986fa5;
  }

 .is-focused{
    border-style: solid;
    border-color: #986fa5;
    margin:-3px;
  }

 .is-focused {
   box-shadow: 0  0 0 3px #986fa5;
  }