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

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>

我用Google搜索并尝试使用outline-offset: 0;，但没有成功

Answer 1

您可以使用方框阴影或轮廓代替

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-shadow CSS属性在元素的框架周围添加阴影效果。您可以设置多个效果，以逗号分隔。框阴影由相对于元素的X和Y偏移，模糊和展开半径以及颜色来描述。

和

  

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

     

outline CSS属性是在单个声明中设置各种轮廓属性的简写：outline-style，outline-width和outline-color。

关于轮廓偏移

  

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

     

outline-offset CSS属性设置轮廓与元素的边缘或边框之间的空间量。