How avoid form elements move when get focus

Question

I added a style for when input text get focus. Then, all other elements below move every time the textbox gets/loses focus.

input[type=text]:focus {
  border: 3px solid #555;
  outline-offset: 0;
}

<input id="CodPostal" name="CodPostal" type="text" value placeholder="focus here">
<br/> text
<br/>
<input id="Name" name="Name" type="text" value>

I googled it and tried with outline-offset: 0; but didn't work

Answer 1

you can use box-shadow or outline instead

input[id="CodPostal"]:focus {
  box-shadow: 0 0 0 3px #555;
}
/* or */
input[id="Name"]:focus {
  outline: 3px solid #555
}

<input id="CodPostal" name="CodPostal" type="text" value>
<br/> text
<br/>
<input id="Name" name="Name" type="text" value>

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

and

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

The outline CSS property is a shorthand to set various outline properties in a single declaration: outline-style, outline-width, and outline-color.

and about outline-offset

https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset

The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element.