Form input, when focused, causes submit button to move slightly

Viewed 1687

thanks for the help, I bet this is an easy fix.

I've applied a custom :focus to my input which removes the default outline (glow) and adds a box shadow and border. The only problem is that when the input field is focused, because of the border and box shadow, the submit button, which rests to the right of the input, jumps to the right about a pixel or two. Very annoying.

JSFiddle: http://jsfiddle.net/D3k3B/

<form action="#" method="get">
            <input type="text" name="email" placeholder="Your email">
            <input type="Submit" name="submit" value="Go">
</form>

form {
    position: absolute;
    bottom: 20%;
    width: 400px;
    left: 50%;
    margin-left: -125px;

}

input[name="email"] {
    font-family: "Prosto One";
    width: 200px;
    height: 25px;
    font-size: 14px;
    background-color: rgba(0,0,0,.4);
    border: none;
    border-radius: 10px;
    color: white;

}

input:focus {
    outline: none;
    border: 1px solid yellow;
    box-shadow: 0px 0px 10px yellow;
}

input[name="submit"] {
    margin: -5px;
    width: 50px;
}

Thanks!

2 Answers
Related