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

时间:2018-07-02 08:06:21

标签: jquery css css3 cursor prestashop

我正在使用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%;
}

1 个答案:

答案 0 :(得分: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>