Question

我有一个带有引导程序类的表单，当单击或聚焦输入时，其中会出现一个渐变边框。但是，当单击输入时，表格的高度也会移动。我希望无论边框是否显示，表单都保持静态。

我尝试使span背景：透明，但是当输入被聚焦时它不会显示边框。

<div class="box">
<div class="row">
<div class="gradient-box">
<span>
<input type="text" name="name"class="form-control" />
</span>
</div><br>
</div>
<div class="row">
<div class="gradient-box">
<span>
<input type="password" placeholder="Password" class="form-control" />
 </span>
 </div><br>
</div>
</div>

.gradient-box span {
align-items: center;
background: transparent;
display: flex;
justify-content: center;
transition: background .5s ease;
width: 100%;
}

.gradient-box:hover span,gradient-box:focus span, gradient-box 
span:focus, gradient-box:active,form-control:focus  {
background-image: linear-gradient(to right, #2c22d4 0%, #e875fb 100%);
padding: 3px;
}
.form-control{
background-color: #333333;
color: white;
}

我希望表单在单击输入之一时停止更改其高度。

Answer 1

您的问题是填充，而不是背景。填充仅在聚焦后才会出现，因此会将元素向下移动。始终将padding:3px移至.gradient-box span，并且不会移动

.gradient-box span {
    align-items: center;
    background: transparent;
    display: flex;
    justify-content: center;
    transition: background .5s ease;
    width: 100%;
    padding: 3px;
}

.gradient-box:hover span,gradient-box:focus span, gradient-box 
span:focus, gradient-box:active,form-control:focus  {
    background-image: linear-gradient(to right, #2c22d4 0%, #e875fb 100%);
}

.form-control{
    background-color: #333333;
    color: white;
}

如何在单击输入时固定表格的高度，并在输入：焦点时出现边框？

1 个答案: