When focusing on an input field with a 3px border, all the other input fields keep moving

Question

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> 

Answer 1

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

Answer 2

Try this:

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

Because you've added 3px on the border and a padding of 2px on the unfocused state, you'll have to do some math to the focused state to make it equal to when it's not focused. In your case, doing -1px on margin on the focused state should cancel the jump.