焦点边界导致背景图像跳跃

Question

当输入有焦点时，是否有任何方法可以阻止背景图像跳跃。

当输入获得焦点时，会向其添加2px边界，但这会导致图像跳跃。

添加background-attachment: fixed会导致图像消失。

.search_box {
border: 1px solid #0065bd;
background-color: #fff;
background: url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
padding-right: 20px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
height: 42px;
width: 100%;
padding: 6px 12px;
}
.search_box:focus {
background-color: #d9effc;
border: 2px solid #0065bd;
}

<input type="text" class="textbox search_box" name="keywords" />

Answer 1

首先，定义两个维度的背景位置。我强烈建议以像素为单位进行此操作。然后，在焦点样式上，将背景位置重置为-1px-1px，以补偿新的额外边界像素。

.search_box {
[...]
background-position: 0 0;
}
.search_box:focus {
[...]
background-position: -1px -1px;
}

Answer 2

您可以在.search_box上使用box-sizing: border-box;，使其即使具有更大的边界也保持相同的大小，并且margin-left: -1px;在CCD_ 5上将其保持在相同的位置。

.search_box {
border: 1px solid #0065bd;
background-color: #fff;
background: url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
padding-right: 20px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
height: 42px;
width: 100%;
padding: 6px 12px;
box-sizing: border-box;
}
.search_box:focus {
background-color: #d9effc;
border: 2px solid #0065bd;
margin-left: -1px;
}

<input type="text" class="textbox search_box" name="keywords" />

Answer 3

使用长方体阴影。

我通常用这个生成器生成我的：盒子阴影生成器

.search_box {
border: 1px solid #0065bd;
background-color: #fff;
background: url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
padding-right: 20px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
height: 42px;
width: 100%;
padding: 6px 12px;
}
.search_box:focus {
background-color: #d9effc;
box-shadow: 0px 0px 0px 2px rgba(0,101,189,1);
}

<input type="text" class="textbox search_box" name="keywords" />