CSS outline is different for input and input:focus

Question

I'm having a problem with an box and its associated css outline style. When the box is focused, it should have a blue outline (working). On form validation, if there is a problem, the .error class is added changing the outline and background color red (not working)

On focus I have a style:

input, select {
    font-size: 10pt;
    border: solid 1px #9598a0;
    padding: 2px;
}

input:focus{
    background: #EFF5FF;
    color: black;
    outline: solid 2px #73A6FF;
}

For the error:

input.error:focus, .error {
    outline: 2px solid red;
    background: rgb(255,240,240);
}

The problem is that the outline without focus is on the outside of the input box while the outline on focus is on the inside of the box so the element jumps as you click on it (CHROME).

Please see this image:

First is on focus, second is no focus with error, third is error with focus. Notice how the no focus causes the border to expand outside the object.

Is there a good way to fix this?

Answer 1

Try setting outline-offset explicitly. Any valid (see Syntax section) value should do, but for moving outline inside the element a negative one can be applied, for example:

JSFiddle

input {
    background: #EFF5FF;
    outline: solid 2px #73A6FF;
    outline-offset: -2px;
}

input.error {
    outline: 2px solid red;
    background: rgb(255,240,240);
}

Although you are asking about Chrome, be aware that outline-offset property is not supported in IE.