CSS for input[type="submit"]

Question

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 1

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.

Answer 2

The space character in CSS is the Descendant Combinator. It tells your CSS compiler to select any descendant of the previous selector.

What your current selector is doing is trying to select any element with a class attribute containing .wysija-submit.wysija-submit-field, then it's trying to find an input element whose type is submit inside that element. This would work for the following markup:

<elem class="wysija-submit wysija-submit-field">
  <input type="submit" />
</elem>

To get this to select the input element whose type is submit and whose class contains wysija-submit and wysija-submit-field, you'll need to change your selector from:

.wysija-submit.wysija-submit-field input[type="submit"] { ... }

To:

input[type="submit"].wysija-submit.wysija-submit-field { ... }