Поместите курсор в поле ввода, когда щелкните вокруг него - PullRequest
Новая
       8

Поместите курсор в поле ввода, когда щелкните вокруг него

0 голосов
/ 02 июля 2018

Я использую код модификации 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 голосов
/ 02 июля 2018

Это не имеет ничего общего с 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>
...