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

Question

I added css focus to the input field. which has a default style that contains a border and shadow. When I focus on the input field, the input field below is slightly reduced. I tried adding height in 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 on which you did not have one (or increasing border-width ) will actually make the element larger, therefore it can potentially lead to the movement of other elements. To avoid this, you must make sure that the total size (height or width + padding + border + margin) is the same. In your case, I think you should try adding 2px margin to the unfocused style to compensate (since 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 the following:

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

Since you added 3px to the border and filled 2px in the unfocused state, you will need to do some math in the focused state to make it equal when it is not focused. In your case, doing -1px around the edge in a focused state should cancel the transition.

Answer 3

Yes, because the horizontal space occupied by the input field increases by 6 pixels when it receives focus, because the border is applied only during focus, and 3 pixels on each side. Instead, set the boundary for existence all the time and change the color-color property during focus.