Question

我有一个围绕输入和按钮的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>

这是我的css：

body {
    margin: 10px;
}

input{
    padding: 0;
    border: 0;
  }

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

  input:focus{
    outline-width: 0px;
  }

  .search * {
        height: 35px;

    }

    /*.search-button{
        position: absolute;
    }*/

    .searchbar {
        width: 450px;
    }

这是我的js / jquery：

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

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

Answer 1

您可以更改

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

到

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

可以看到here

Answer 2

使用大纲

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

演示：https://jsfiddle.net/04x6018h/

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

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

https://jsfiddle.net/04x6018h/1/

或box-shadow

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

https://jsfiddle.net/04x6018h/2/

Answer 3

这是因为边框大小，您可以使用:before伪元素与position:absolute;来解决问题。

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

body { margin: 10px; }

input {
    padding: 0;
    border: 0;
    text-indent: 5px;
}
input:focus{ outline-width: 0px; }

.is-focused { position:relative;}
.is-focused:before {
    content: '';
    position: absolute;
    top:0;left:0;bottom:0;right:0;
    border-style: solid;
    border-color: #986fa5;
}

.search * { height: 35px; }
.searchbar { width: 450px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 4

border按照边框宽度展开元素，而outline则不会。只需用边框替换你的轮廓，就会删除跳跃。

＆＃13;

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

＆＃13;

body {
  margin: 10px;
}
input {
  padding: 0;
  border: 0;
}
.is-focused {
  outline-style: solid;
  outline-color: #986fa5;
}
input:focus {
  outline-width: 0px;
}
.search * {
  height: 35px;
}
/*.search-button{
        position: absolute;
    }*/

.searchbar {
  width: 450px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

为什么输入会在聚焦时移动？

4 个答案: