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">
    
   

Solution 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.

Solution 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 { ... }

Comments

[Christian Vincenzo Traina]

The first one works. The other two are meaningless (The space means that you are targeting the button inside the class, instead your class is applied to button). What's your browser?

[lampshade]

See in this fiddle that the first one works.

[James Donnelly]

@Robin on a side-note I wrote a small web application a while back which attempts to reveal what a CSS selector is doing. This can be found at selectors.io. Pasting your selector in will tell you exactly what the CSS compiler is trying to do with it.

[James Donnelly]

@BoltClock heh, I thought you might like it. One day I decided I wanted to both learn React and improve my regex knowledge and that was the outcome. It's not perfect. Once I've got a couple more React projects behind me I'm planning on rewriting it as I can only imagine it's a complete mess as it currently stands!

[Robin Andrews]

I would have voted for this answer because it was most helpful, but the one I marked as solution was the simplest. (Although come to think of it my question was asking for "can someone explain..." which you did very clearly. Ho hum.

[Robin Andrews]

As a side note, the reason this didn't seem to work was caching on Chrome. I did a hard page reload and it worked.