表单输入，当聚焦时，会导致提交按钮轻微移动

Question

感谢您的帮助，我敢打赌这很容易解决。

我已将自定义 :focus 应用于我的输入，它删除了默认轮廓（发光）并添加了框阴影和边框。唯一的问题是，当输入字段获得焦点时，由于边框和框阴影，位于输入右侧的提交按钮会向右跳大约一两个像素。很烦人。

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

谢谢！

Answer 1

设置边框 1px 实心透明输入[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

您需要将您的边框 css 与一个透明值相匹配，以便它们在应用时不会移动

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;

}

工作示例： http://jsfiddle.net/whiteb0x/D3k3B/3/