focus border causing background-image to jump - html

Question

Is there anyway to stop the background-image jumping when the input has focus.
A 2px border is added to the input when it gets focus but this causes the image to jump.
Adding background-attachment: fixed causes the image to disappear.
.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

first, define the background position for both dimension. I strongly recommend to do this in pixels. Then, on the focus-style, reset the background-position to -1px -1px to compensate the new extra border pixel.
.search_box {
[...]
background-position: 0 0;
}
.search_box:focus {
[...]
background-position: -1px -1px;
}

Answer 2

You can use box-sizing: border-box; on .search_box to make it stay the same size even with a bigger border, and margin-left: -1px;
on .search_box:focus to keep it in the same place.
.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

Use box-shadow.
I usually generate mine with this generator: Box Shadow Generator
.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" />