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无关。

单击标签时，有两种方法可以专注于输入。

包装输入元素

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

用于标签

的属性
```
for={id of the input}
```

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

单击光标时将其放在输入字段中

1 个答案: