Css 表单输入在聚焦时会导致提交按钮稍微移动

谢谢你的帮助，我打赌这是一个简单的解决办法

我对输入应用了一个自定义：focus，它删除了默认轮廓（光晕），并添加了框阴影和边框。唯一的问题是，当输入字段被聚焦时，由于边框和框的阴影，位于输入右侧的submit按钮会向右跳一到两个像素。很烦人

JSFiddle：

形式{
位置：绝对位置；
底部：20%；
宽度：400px；
左：50%；
左边距：-125px；
}
输入[name=“email”]{
字体系列：“Prosto One”；
宽度：200px；
高度：25px；
字体大小：14px；
背景色：rgba（0,0,0,4）；
边界：无；
边界半径：10px；
颜色：白色；
}
输入：焦点{
大纲：无；
边框：1px纯黄色；
盒影：0px 0px 10px黄色；
}
输入[name=“submit”]{
保证金：-5px；
宽度：50px；
}

---

谢谢

将边框1px实心透明设置为输入[name=“email”]

---

您需要将边框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;

}

工作示例：

---

Gah非常感谢，我希望自己能解决这个问题。哼！这是一个有点棘手的问题，我记得不久前也遇到过这个问题

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;

}

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;

}