Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Mailchimp checkbox conflicting with CSS style

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • February 7, 2019 at 1:11 pm #282443
    djleggins
    Participant

    Hello, I have built a website using a Template https://html5up.net/story and tried to insert a newsletter registration form by MailChimp.

    The problem is now, that the CSS style of the HTML5 Template somehow hides the checkbox (to subscribe for the newsletter).

    This is the form how it should be: http://eepurl.com/ggA8D1

    And this is the form as it is displayed: http://www.daddies.lu/index10.html (scroll at the Bottom of the page) when removing the CSS sytles from MailChimp.

    The CSS relevant part of the HTML5 up Template is:

    /* Form */

    form {
    margin: 0 0 2rem 0;
}

    form > :last-child {
        margin-bottom: 0;
    }

    form > .fields {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: calc(100% + 3rem);
        margin: -1.5rem 0 2rem -1.5rem;
    }

        form > .fields > .field {
            -moz-flex-grow: 0;
            -webkit-flex-grow: 0;
            -ms-flex-grow: 0;
            flex-grow: 0;
            -moz-flex-shrink: 0;
            -webkit-flex-shrink: 0;
            -ms-flex-shrink: 0;
            flex-shrink: 0;
            padding: 1.5rem 0 0 1.5rem;
            width: calc(100% - 1.5rem);
        }

            form > .fields > .field.half {
                width: calc(50% - 0.75rem);
            }

            form > .fields > .field.third {
                width: calc(100%/3 - 0.5rem);
            }

            form > .fields > .field.quarter {
                width: calc(25% - 0.375rem);
            }

    @media screen and (max-width: 480px) {

        form > .fields {
            width: calc(100% + 3rem);
            margin: -1.5rem 0 2rem -1.5rem;
        }

            form > .fields > .field {
                padding: 1.5rem 0 0 1.5rem;
                width: calc(100% - 1.5rem);
            }

                form > .fields > .field.half {
                    width: calc(100% - 1.5rem);
                }

                form > .fields > .field.third {
                    width: calc(100% - 1.5rem);
                }

                form > .fields > .field.quarter {
                    width: calc(100% - 1.5rem);
                }

    }

label {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0 0 1rem 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background-color: transparent;
    border-radius: 4px;
    border: none;
    border: solid 1px;
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 0.825rem;
    text-decoration: none;
    width: 100%;
}

    input[type="text"]:invalid,
    input[type="password"]:invalid,
    input[type="email"]:invalid,
    input[type="tel"]:invalid,
    input[type="search"]:invalid,
    input[type="url"]:invalid,
    select:invalid,
    textarea:invalid {
        box-shadow: none;
    }

select {
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    height: 2.75rem;
    padding-right: 2.75rem;
    text-overflow: ellipsis;
}

    select:focus::-ms-value {
        background-color: transparent;
    }

    select::-ms-expand {
        display: none;
    }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
    height: 2.75rem;
}

textarea {
    padding: 0.75rem 1rem;
}

input[type="checkbox"],
input[type="radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    float: left;
    margin-right: -2rem;
    opacity: 0;
    width: 1rem;
    z-index: -1;
}

    input[type="checkbox"] + label,
    input[type="radio"] + label {
        text-decoration: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        display: inline-block;
        font-size: 1rem;
        font-weight: 300;
        padding-left: 2.4rem;
        padding-right: 0.75rem;
        position: relative;
        margin-bottom: 0;
    }

        input[type="checkbox"] + label:before,
        input[type="radio"] + label:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-transform: none !important;
        }

        input[type="checkbox"] + label:before,
        input[type="radio"] + label:before {
            border-radius: 4px;
            border: solid 1px;
            content: '';
            display: inline-block;
            height: 1.65rem;
            left: 0;
            line-height: 1.58125rem;
            position: absolute;
            text-align: center;
            top: 0;
            width: 1.65rem;
        }

    input[type="checkbox"]:checked + label:before,
    input[type="radio"]:checked + label:before {
        content: '\f00c';
    }

input[type="checkbox"] + label:before {
    border-radius: 4px;
}

input[type="radio"] + label:before {
    border-radius: 100%;
}

::-webkit-input-placeholder {
    opacity: 1.0;
}

:-moz-placeholder {
    opacity: 1.0;
}

::-moz-placeholder {
    opacity: 1.0;
}

:-ms-input-placeholder {
    opacity: 1.0;
}

label {
    color: #000000;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
    border-color: rgba(0, 0, 0, 0.2);
}

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="search"]:focus,
    input[type="url"]:focus,
    select:focus,
    textarea:focus {
        border-color: #47D3E5;
        box-shadow: 0 0 0 1px #47D3E5;
    }

select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.2)' /%3E%3C/svg%3E");
}

    select option {
        color: #000000;
        background: #ffffff;
    }

input[type="checkbox"] + label,
input[type="radio"] + label {
    color: #000000;
}

    input[type="checkbox"] + label:before,
    input[type="radio"] + label:before {
        border-color: rgba(0, 0, 0, 0.2);
    }

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
    border-color: #47D3E5;
    box-shadow: 0 0 0 1px #47D3E5;
}

::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.75) !important;
}

:-moz-placeholder {
    color: rgba(0, 0, 0, 0.75) !important;
}

::-moz-placeholder {
    color: rgba(0, 0, 0, 0.75) !important;
}

:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.75) !important;
}

    And this is the MailChimp code

    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */


#mc-embedded-subscribe-form input[type=checkbox]{display: inline; width: auto;margin-right: 10px;}
#mergeRow-gdpr {margin-top: 20px;}
#mergeRow-gdpr fieldset label {font-weight: normal;}
#mc-embedded-subscribe-form .mc_fieldset{border:none;min-height: 0px;padding-bottom:0px;}

    Subscribe to our mailing list

    * indicates required


    Please select all the ways you would like to hear from The Luxembourg Daddy Group:


    You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

    We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp’s privacy practices here.

    //s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]=’FNAME’;ftypes[1]=’text’;fnames[0]=’EMAIL’;ftypes[0]=’email’;}(jQuery));var $mcj = jQuery.noConflict(true);

    February 7, 2019 at 1:12 pm #282444
    djleggins
    Participant
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.