Html 当聚焦于一个具有3px边框的输入字段时,所有其他输入字段都会不断移动
我在输入字段上添加了一个css焦点。具有包含边框和阴影的默认样式。当我关注输入字段时,下面的输入字段会稍微向下移动。我试着给李增加一个高度,但没用Html 当聚焦于一个具有3px边框的输入字段时,所有其他输入字段都会不断移动,html,css,Html,Css,我在输入字段上添加了一个css焦点。具有包含边框和阴影的默认样式。当我关注输入字段时,下面的输入字段会稍微向下移动。我试着给李增加一个高度,但没用 /* CSS input[type="text"], input[type="password"] { border: 1px solid #CCCCCC; box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2); min-height: 22px; padding: 3px;
/* CSS
input[type="text"],
input[type="password"] {
border: 1px solid #CCCCCC;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
min-height: 22px;
padding: 3px;
}
.checkout input:focus {
border:3px solid #6b991c;
padding:2px;
}
*/
<ul class="clearFix">
<li>
<label for="title" class="checkoutLabel">Title <strong class="requiredInfo">*</strong></label>
<select name="title" id="title" class="required">
<option selected="selected">Please select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</li>
<li class="active">
<label class="checkoutLabel" for="firstName">First name <strong class="requiredInfo">*</strong></label>
<div class="checkoutInputLarge">
<input type="text" name="firstName" id="firstName" class="required" />
</div>
</li>
<li>
<label for="lastName" class="checkoutLabel">Last name <strong class="requiredInfo">*</strong> </label>
<div class="checkoutInputLarge active">
<input type="text" name="lastName" id="lastName" class="checkoutInput1 required" />
</div>
</li>
<li>
<label for="email" class="checkoutLabel">Email <strong class="requiredInfo">*</strong></label>
<div class="checkoutInputLarge">
<input type="text" name="email" id="email" class="required" />
</div>
</li>
<li>
<label for="phoneNumber" class="checkoutLabel">Phone number <strong class="requiredInfo">*</strong></label>
<div class="checkoutInputLarge">
<input type="text" name="phoneNumber" id="phoneNumber" class="checkoutInput1 required" />
</div>
</li>
<li>
<input type="checkbox" name="smsAlert" id="smsAlert" /><label for="smsAlert" class="smsAlertLabel">I wish to receive SMS alerts on my order status</label>
</li>
<li>
<label class="checkoutLabel">Are you a <br /> business customer? <strong class="requiredInfo">*</strong></label>
<input type="radio" name="businessCustomer" id="businessCustYes" value="yes" class="radio required" /><label class="businessCustomerLabels" for="businessCustYes">Yes</label>
<input type="radio" name="businessCustomer" id="businessCustNo" value="no" class="radio required" checked="checked" /><label class="businessCustomerLabels" for="businessCustNo">No</label>
</li>
</ul>
/*CSS
输入[type=“text”],
输入[type=“password”]{
边框:1px实心#中交;
盒影:0-1px3pxRGBA(0,0,0,0.2);
最小高度:22px;
填充:3倍;
}
.签出输入:焦点{
边框:3px实心#6b991c;
填充:2px;
}
*/
-
Title*
请选择
先生
夫人
错过
博士
-
名字*
-
姓氏*
-
电子邮件*
-
电话号码*
-
我希望收到有关我订单状态的短信提醒
-
您是业务客户吗*
对
不
是的,因为当输入字段获得焦点时,它所占据的水平空间增加了6个像素,因为边框仅在焦点期间应用,并且每侧为3倍。相反,将边框设置为始终存在,并在对焦期间更改border color属性。在以前没有边框的地方设置边框(或增加边框宽度)将有效地使元素变大,从而可能导致其他元素移动。为了避免这种情况,您应该尝试确保总大小(高度或宽度+填充+边框+边距)相同。在您的例子中,我认为您应该尝试向未聚焦样式添加2px边距以进行补偿(因为聚焦元素的边框要大2px)。尝试:
试试这个:
.checkout input:focus {
margin-right: 50px;
padding: 2px;
margin: -1px;
}
因为您在边框上添加了3px,在未聚焦状态上添加了2px的填充,所以您必须对聚焦状态进行一些计算,使其与未聚焦状态相等。在您的情况下,在聚焦状态的边距上执行-1px应该会取消跳转
.checkout input:focus {
margin-right: 50px;
padding: 2px;
margin: -1px;
}