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

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? — Christian Vincenzo Traina, Nov 10 '16 at 10:58
See [in this fiddle](https://jsfiddle.net/6t9bkdkk/) that the first one works. — lampshade, Nov 10 '16 at 10:58

score 10 · Accepted Answer · answered Nov 10 '16 at 10:59

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.

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. — Robin Andrews, Nov 10 '16 at 11:17

James Donnelly · Answer 2 · 2016-11-10T11:01:29.417

5

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

edited Nov 10 '16 at 11:01

answered Nov 10 '16 at 10:57

James Donnelly

126,410
34
208
218

Thank you so much! Could you explain the logic behind this? – Robin Andrews Nov 10 '16 at 11:00
@Robin I've updated my answer. Hope this clears things up. – James Donnelly Nov 10 '16 at 11:01
1

@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 https://selectors.io. Pasting your selector in will tell you exactly what the CSS compiler is trying to do with it. – James Donnelly Nov 10 '16 at 11:02
@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! – James Donnelly Nov 10 '16 at 11:14
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 Nov 10 '16 at 11:14

CSS for input[type="submit"]

2 Answers2