Jump to content

Recommended Posts

Hi,

I am using css modification code for for fields disign modification but when I click above the label of the field than the cursor is not in the field.

Short video for the problem: streamable.com/gwhkx

my demo website where is installed the code: iskambg.com/iskampanda4/   - checkout page

Here is the whole code:

#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%;
}

 

cursor.webm

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...