当重点关注3px边框的输入字段时,所有其他输入字段保持移动 [英] When focusing on an input field with a 3px border, all the other input fields keep moving
问题描述
我在输入字段中添加了一个css焦点。其中包含边框和阴影的默认样式。当我专注于输入字段时,下面的输入字段稍微向下移动。
I added a css focus on input field. which has a default style which contains border and shadow. When I focus on the input field, the input field below moves down slightly. I tried adding a height to the li but that didn't work.
/* 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>
推荐答案
在您之前没有边界的地方(或者增加 border-width
)会使元素变大,因此可能导致其他元素移动。为了避免这种情况,您应该尽量确保总大小(高度或宽度+填充+边框+边距)相同。在你的情况下,我认为你应该尝试添加一个2像素的边缘到未聚焦的样式来补偿(因为被聚焦的元素的边界大2px)。试试:
Having a border where you didn't have one before (or increasing the border-width
) will effectively make the element larger, therefore potentially causing other elements to move. To avoid this, you should try to make sure the total size (height or width + padding + border + margin) is the same. In your case, I think you should try adding a 2px margin to the unfocused style to compensate (since the the border of the focused element is 2px larger). Try:
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;
margin: 2px;
}
.checkout input:focus {
border:3px solid #6b991c;
padding:2px;
margin: 0;
}
这篇关于当重点关注3px边框的输入字段时,所有其他输入字段保持移动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!