6
Tôi đã thêm tiêu điểm css vào trường nhập. trong đó có một phong cách mặc định trong đó có biên giới và bóng tối. Khi tôi tập trung vào trường nhập, trường nhập dưới đây sẽ di chuyển xuống một chút. Tôi đã thử thêm chiều cao cho li nhưng điều đó không hiệu quả.Khi tập trung vào trường nhập có đường viền 3px, tất cả các trường nhập khác tiếp tục di chuyển
/* 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>