获得焦点时如何避免表单元素移动

Question

我添加了输入文本获得焦点时的样式。然后，每次文本框获得/失去焦点时，下面的所有其他元素都会移动。

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>

我用谷歌搜索并尝试outline-offset: 0;但没有用

Answer 1

您可以改用 box-shadow 或 outline

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

该box-shadowCSS属性元素周围的边框加阴影效果。您可以设置多个以逗号分隔的效果。框阴影由相对于元素的 X 和 Y 偏移、模糊和扩散半径以及颜色来描述。

和

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

该outlineCSS属性是一个速记在一个声明中设置不同的轮廓属性：outline-style，outline-width，和outline-color。

以及关于轮廓偏移

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

的outline-offsetCSS属性设置元素的轮廓和边缘或边界之间的空间量。