user3494047 user3494047 - 1 month ago 7
HTML Question

Why does the input move when focused?

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.

Answer

You can change

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

to

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

Can be seen here

Comments