How to add Custom Css within the Editor?

Question

I've been struggling for a while with this one.

I am trying to target an element within a column or block, in this case the 'Submit' button of a WPForm.

So I open the developer tools in Firefox, select my element and get the class name:

<button type="submit" name="wpforms[submit]" id="wpforms-submit-863" class="wpforms-submit" data-alt-text="Sending..." data-submit-text="Submit" aria-live="assertive" value="wpforms-submit">Submit</button>

Now, in the editor I select the form (or column) and add the following to the custom CSS section:

.button[type="submit"] {
  background: yellow;
}

I've tried wpforms-submit and other variations however, nothing happens and it's not the first time. I think I just don't understand something about the logic or nesting or else.

How do I target an element with custom CSS in the Editor?

Answer 1

From what you wrote it seems you might need to look at CSS Specificity... Which in short means: the more specific the CSS selector is, it has more value and therefore it will be used instead of the weaker one. (You can learn more about it for example here.)

Plugins usually use more complex and specific selectors, so you need to make sure you will make your selectors stronger in order to override the initial style. Basically you have several ways:

1. Make the selector more specific
2. Use the very same selector, but place it later in the code
3. Use !important flag in the definition (better use only in desperate cases)

Also it seems WPForms offer to set specific classes to the elements (check here). Using those classes in your selectors will probably make them more specific and therefore they will override the initial ones.