jquery - 单击它时将光标放在输入字段中

Question

我正在为字段设计修改使用 css 修改代码，但是当我在字段标签上方单击时，光标不在该字段中。

问题的短视频:streamable.com/gwhkx

我的演示网站安装了代码:iskambg.com/iskampanda4/- 结帐页面

完整代码如下:

    #field_customer_firstname, #field_customer_lastname, #field_delivery_phone, #field_customer_email {
    margin-top: 10px !important;
    border: 1px solid #ccc;
    padding-right: 5px !important;
    border-radius: 5px;
    margin-right: 10px !important;
}

#field_customer_firstname .help-block, #field_customer_lastname .help-block, #field_delivery_phone .help-block, #field_customer_email .help-block {
    /*display: none !important;*/
}

div#onepagecheckoutps input.error, div#onepagecheckoutps input.valid {
    background-image: none !important;
}

#field_customer_firstname.col-6, #field_customer_lastname.col-6, #field_delivery_phone.col-6, #field_customer_email.col-6 {
    max-width: 48% !important;
}
@media (min-width: 420px) and (max-width: 1200px){
    #field_customer_firstname.col-6, #field_customer_lastname.col-6, #field_delivery_phone.col-6, #field_customer_email.col-6 {
        max-width: 96% !important;
    }
}

div#onepagecheckoutps input:focus, div#onepagecheckoutps textarea:focus, div#onepagecheckoutps select:focus {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

#field_customer_firstname label, #field_customer_lastname label, #field_delivery_phone label, #field_customer_email label {
    display: block;
    padding: 5px 0px !important;
}

#field_customer_firstname label sup, #field_customer_lastname label sup, #field_delivery_phone label sup, #field_customer_email label sup {
    text-align: right;
    display: block;
    font-size: 14px !important;
}
#field_customer_firstname , #field_customer_lastname , #field_delivery_phone, #field_customer_email  {
    /*border: 0px !important;*/
}
#form_customer .addborder{
    border: 0px !important;
}
#field_customer_firstname input, #field_customer_lastname input, #field_delivery_phone input, #field_customer_email input {
    border: 0px !important;
    font-size: 15px !important;
}

#field_customer_firstname label sup img, #field_customer_lastname label sup img, #field_delivery_phone label sup img, #field_customer_email label sup img {
    width: 12px !important;
    height: 12px;
    padding: 2px;
    border: 1px solid #51AC58;
    border-radius: 8px;
}

#panel_addresses_customer {
    display: none !important;
}

#js-delivery .delivery-option {
    border: none !important;
}

#shipping_container #js-delivery .delivery-option .pts-vcenter {
    display: none !important;
}

#field_customer_checkbox_create_account_guest {
    padding-left: 5px !important;
}

#field_customer_firstname label sup, #field_customer_lastname label sup, #field_delivery_phone label sup, #field_customer_email label sup#field_customer_firstname, #field_customer_lastname, #field_delivery_phone, #field_customer_email {
    position: relative;
}

div#onepagecheckoutps span, div#onepagecheckoutps em, div#onepagecheckoutps label {
    font-size: 15px;
}

#field_customer_firstname label, #field_customer_lastname label, #field_delivery_phone label, #field_customer_email label {
    position: absolute;
    display: block;
    width: 92%;
    top: 25%;
    transition: 0.25s;
}

#field_customer_firstname input, #field_customer_lastname input, #field_delivery_phone input, #field_customer_email input {
    margin-top: 8%;
}

Answer 1

它与 CSS 无关。

当您点击标签时，有两种方法可以让您专注于输入。

1. 包装输入元素

   ---

   <Form>
       <label>First Name:
           <input type='text' name='firstname'>
       </label>
   </Form>
   

2. 用于标签属性
   

   for={id of the input}
   

---

    <Form>
        <label for="fname">First Name:</label>
        <input type='text' name='firstname' id='fname'>
    </Form>