Why does the input move when focused?

Question

I have a div surrounding an input and a button and whenever the input is focused, it moves. How can I get it to stop moving?

Here is my 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>

Here is my 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;
    }

and here is my js/jquery:

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

I also have a fiddle here where you can see the input moving when focused.

It's because you used a border. The border will move your element. See the answers to use outline, this won't move your element. — Patrick Mlr, Oct 31 '16 at 12:11

score 1 · Accepted Answer · answered Oct 31 '16 at 12:09

1

You can change

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

to

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

Can be seen here

answered Oct 31 '16 at 12:09

Nick G

1,953
12
16

this works. How come the border makes it move though? – user3494047 Oct 31 '16 at 12:15
3

@user3494047 Basically because borders take up space on the page and outlines don't. It's something you wouldn't know right away, but [here](http://webdesign.about.com/od/advancedcss/a/outline_style.htm) is an article about it and [here](http://stackoverflow.com/questions/1158515/difference-between-outline-and-border) is an answer about it. – Nick G Oct 31 '16 at 12:17

madalinivascu · Answer 2 · 2016-10-31T12:17:10.860

0

Use outline

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

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

or use negative margins (not recommended):

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

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

or box-shadow

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

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

edited Oct 31 '16 at 12:17

answered Oct 31 '16 at 12:10

madalinivascu

32,064
4
39
55

Sojtin · Answer 3 · 2016-10-31T12:17:22.393

It's because size of border, you can use :before pseudo element with position:absolute; to solve issue.

$('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>

score 0 · Answer 4 · answered Oct 31 '16 at 12:20

A border expands your element by it's border width, while an outline does not. Simply replace your outlines by borders and the jumping will be removed.

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

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;
}

<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>

Why does the input move when focused?

4 Answers4