当关注3px边框的输入字段时，所有其他输入字段保持移动

我在输入字段中添加了一个css焦点。其中包含边框和阴影的默认样式。当我专注于输入字段时，下面的输入字段稍微向下移动。我试图给李的增加一个高度，但这没有奏效。当关注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>

来源

2011-11-25 Kam

有一个你以前没有的边界（或增加border-width）会有效地使元素变大，因此可能导致其他元素移动。为了避免这种情况，您应该尽量确保总大小（高度或宽度+填充+边框+边距）相同。在你的情况下，我认为你应该尝试添加一个2像素的边缘到未聚焦的样式来补偿（因为被聚焦的元素的边界大2px）。尝试：

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; 
}

来源

2011-11-25 14:24:18

是的，因为水平空间由输入字段增大占领当它获得焦点，因为对焦期间仅被施加的边界，这是3PX每边6个像素。相反，设置一个边框以保持焦点时的边框颜色属性。

来源

2011-11-25 14:22:02 austincheney

试试这个：

.checkout input:focus { 
    margin-right: 50px; 
    padding: 2px; 
    margin: -1px; 
}

因为你已经在边境和2px的对对焦状态的填充添加3px的，你就必须做一些数学的聚焦状态使其与未聚焦时相等。在你的情况下，在聚焦状态下对边距执行-1px应该取消跳转。

来源

2011-11-25 14:29:17 Shaoz

当关注3px边框的输入字段时，所有其他输入字段保持移动

回答

相关问题