0

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?

1
  • if you're using the block editor you can add a custom class in the sidebar under the advanced panel, otherwise you'll need to speak with WP Forms support, 3rd party plugin dev support questions are off topic here. Also just because you added a CSS rule doesn't mean that rule is the most specific, your browsers dev tools can show you if the rule is applied and if it was overridden by a more specific rule, but that's a generic CSS question and WP knowledge is not useful for that
    – Tom J Nowell
    Dec 18, 2021 at 16:08

1 Answer 1

0

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.

2
  • Thanks for your answer !important does work, however, the correct selector is selector button[type='submit']. selector is apparently necessary.
    – Sy Ker
    Dec 18, 2021 at 16:46
  • Yes, the best is to first use developer tools to find out under which selector the style is originally defined and use the same selector or stronger. In case of WPForms the initial one may be something like ".wpforms-form button[type='submit']", so simply "button[type='submit']" would not be enough to override it. Dec 18, 2021 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.