How to Stop User Agent Stylesheets from Overriding My CSS

How to stop user agent stylesheets from overriding my css

The "problem" here is that there is actually no input style in the author stylesheet (see the spec for more info), and therefore the style that is defined in the user agent stylesheet is used.

The (relevant) user agent rule (on chrome) is:

input, input[type="password"], input[type="search"] {
   cursor: auto;
}

You can achieve what you want in a couple ways:

1. Create a css class that selects the input directly, for example
   
   
   • using another css class, or
   • selecting the input within the already-defined class,
   • etc
2. Explicitly setting inheritance behavior for the cursor style on all inputs

For (1):

<style>
  .a, .a input {
      cursor: pointer;
  }
</style>

For (2):

<style>
  input {
      cursor: inherit;
  }
  .a {
      cursor: pointer;
  }
</style>

Why is the user agent stylesheet overriding my html{} style?

Nope. If you want your styles to have precedence, they need to apply to the same element. Which, in our case, is input.

You have applied styles to the html element, not to input.

Now, if you changed your selector to html *, to html input, to input or to *, it would be a different story... The two selectors would get compared and yours would have precedence.

The only difference between your selectors and the ones in the default browser stylesheet is yours are loading later, hence, provided you have the same specificity, yours apply. So the minimum selector for yours to apply would be input {}.

But the important bit here is: html {} only styles inheritable input properties which are not defined (not set) at element level. If they are set inheritance does not happen (there's no need to inherit, because the property resolves). The input set value applies, regardless of values and specificity on any of the parents. In fact, if what you're expecting would happen, designing web would be a lot more difficult and a lot less flexible (IMHO).

---

Which is a reaaaaaly long way of saying: change

html {/* globals here*/}

into:

* {/* globals here */}

... and they'll probably work as intended. But be warned: it will apply to all elements, and you will soon understand why the way inheritance works is, in fact, quite smart (and helpful).

Override User Agent Stylesheet CSS in Chrome Browser

Add ul { list-style-type: none; } in your CSS to override the default style applied by the browser (from the user agent stylesheet) and remove the li bullet points

How to prevent user agent stylesheet from overriding my own CSS?

If you use

.usrInput {
    box-sizing: border-box;
}

the dropdown and the input size will match up.

Edit: Usually you can use a css reset such as normalize.css to automatically take care of little quirks like this.

user agent stylesheet override my own styles

The answer to the general question is that only property settings set on an element itself are taken into account when deciding which style setting “wins”. For example, if we have just one style sheet that sets font-size: 18px on the body element and another style sheet that set font-size: 9px on all p elements, then the font size of p elements is 9px, no matter what the origins of the style sheets are, e.g. whether the latter is just a browser default style sheet. Inheritance plays no role here. This is all described in section Assigning property values, Cascading, and Inheritance of the CSS 2.1 spec.

Inheritance is considered only after the above “fight” has been resolved. Only then are inheritable properties inherited by elements that have them not set at all.

The specific question does not provide specific code, but it can be inferred that you have something like this:

 <style>
   body { font-size: 12px; }
 </style>
 <table>
   <tr><td>foo
 </table>
 bar

Normally this causes both “foo” and “bar” to appear in 12px size. The table cell inherits the size from the table row, which inherits it from the tbody element, which inherits it from the table, which inherits it from the body.

However, in your case, this chain is broken. The reason is that the browser style sheet has

 table { font-size: medium }

which in practice tends to mean 16px. Now the table element has the property set, so the cell inherits that value.

Browsers do not normally have such a rule in their style sheets. However, in Quirks Mode, most browsers apply the rule. This means that font size is not inherited from body into tables. This reflects bugs (or oddities) in very old versions of IE and lets legacy page be rendered as they used to be.

If you have unintentionally caused Quirks Mode and do not need it for other purposes, just slap

<!DOCTYPE html>

at the very start of your document. But beware that old pages may get messed up in different ways, if they have been designed in testing conditions that correspond to Quirks Mode.

Alternatively, add the following rule into your style sheet:

table { font-size: 100% }

This means that a table gets the font size of its parent. (Like in inheritance, but safer.)

User agent stylesheet is overriding my css even though it acknowledges it shouldn't?

Looking at your screenshot of the element's computed styles, I notice that its float is set to left. Floating an element tends to blockify it, and in the case of a table-row, that does indeed turn it into a block and ultimately detach it from its table container, as a table-row cannot normally be floated. This is not a case of the UA stylesheet overriding your styles, but how the display and float properties interact.

In order for a table layout to work you cannot float any of its internal table elements, including row groups, rows, and cells. (You can float the table itself.) As I am not familiar with your layout I won't be able to suggest a proper and complete answer to your question, but the key here is to remove the float declaration from that element. Since this declaration doesn't appear in your own styles it must be elsewhere — look for it among the rest of the element's styles. If necessary, override it using float: none.

(There may of course be other factors causing this blockification that as others have mentioned require a proper reproduction of your problem to diagnose, but this is what I could glean from just the screenshots you've provided and is a very common and likely cause.)

---

Related Topics