Robin Robin - 26 days ago 20
CSS Question

CSS for input[type="submit"]

Before I start crying, could someone please explain why none of the attempted CSS soltions for styling a submit button have any effect at all? I've gone for

font-size: 50px
to make it obvious if I hit the right element, which I haven't yet:



input[type="submit"].wysija-submit {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}

.wysija-submit input[type="submit"] {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}

.wysija-submit.wysija-submit-field input[type="submit"] {
border-radius: 10px;
border: none;
box-shadow: none;
font-family: inherit;
font-size: 50px!important;
}

<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">





Answer

This one does work.

input[type="submit"].wysija-submit  {
    border-radius: 10px;
    border: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 50px!important;
}
<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">


.wysija-submit input[type="submit"] and .wysija-submit.wysija-submit-field input[type="submit"] contain descendant combinators so they won't match because the left hand side matches the input, then the right hand side matches nothing because inputs can't have descendants.

Comments