Question

感谢您的帮助，我打赌这是一个简单的解决方案。

我已经应用了一个自定义：焦点到我的输入，删除默认轮廓（发光）并添加一个框阴影和边框。唯一的问题是当输入字段被聚焦时，由于边框和框阴影，位于输入右侧的提交按钮会向右跳转一两个像素。非常烦人。

<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

将border 1px solid transparent设置为输入[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/

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

2 个答案: