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

Question

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!

Answer 1

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

Answer 2

You need to match your border css with a transparent value so they don't move when applied
input[name="email"] {
font-family: "Prosto One";
border: 1px solid transparent;
width: 200px;
height: 25px;
font-size: 14px;
background-color: rgba(0,0,0,.4);
border-radius: 10px;
color: white;
}
working example:
http://jsfiddle.net/whiteb0x/D3k3B/3/