0

I'm thinking about using a CSS boilerplate(kube, or any other) to build my forms. They work great in a sample html file, however if I want to use within an uncontrolled environment (meaning that css is included outside my control), it messes up those styles. I would like to know if it's possible to only apply these styles to elements within an parent container (forexample .custom-options)?

John Slegers
  • 45,213
  • 22
  • 199
  • 169
Friso Kluitenberg
  • 1,157
  • 1
  • 14
  • 34
  • When you say 'css is included outside of my control' does this mean that inline styles are being added onto the form elements that you do not have access to remove? Or does this just mean the css file is being referenced on the page alongside other stylesheets with conflicting styles? – Larz Jun 06 '14 at 13:26
  • It means that the referenced page (for example, the WordPress Admin screen template) includes a number of style sheets applying conflicting styles along side with mine. – Friso Kluitenberg Jun 06 '14 at 13:30
  • you can always add `!important` to make your style take precedence over any others. Example: `h1{color:red !important;}` – MilkyTech Jun 06 '14 at 14:22

1 Answers1

0

If you only intend to use the boilerplate to target forms inside a .custom-options container, one option could be to just make the selectors more specific:

body.custom-form-page .custom-options input[type="text"],
body.custom-form-page .custom-options input[type="password"],
body.custom-form-page .custom-options input[type="email"],
body.custom-form-page .custom-options input[type="url"],
body.custom-form-page .custom-options input[type="phone"],
body.custom-form-page .custom-options input[type="tel"],
body.custom-form-page .custom-options input[type="number"],
body.custom-form-page .custom-options input[type="datetime"],
body.custom-form-page .custom-options input[type="date"],
body.custom-form-page .custom-options input[type="search"],
body.custom-form-page .custom-options input[type="datetime-local"],
body.custom-form-page .custom-options textarea,
body.custom-form-page .custom-options select[multiple="multiple"] {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  font-size: 14px;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  border: 1px solid #bbbcc0;
  outline: none;
  padding: 7px 5px;
  position: relative;
  z-index: 2;
 -webkit-appearance: none;
}

It's not pretty but... the more specific selectors will be given more precedence over wordpress' own styles.

Try to use !important only as a last resort if you can't get a selector to be specific enough.

Larz
  • 1,156
  • 1
  • 8
  • 22