CODEWITHSUNDEEP
cssgoogle-chromewebkit
Matte
Matte

Reputation: 279

Chrome picks up non-existent CSS rules (-webkit)

When rendering a site in Chrome I noticed that certain <input> elements started appearing weird. When inspecting the elements in Chrome's built in developer tools I found matched -webkit CSS-rules which are not present in any stylesheets. For instance the following example:

<input type="submit">

No rules for elements of the kind, but this is what Crome's developer tools show:

Matched CSS Rules:
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button {
-webkit-box-align: center;
...
}

Does anyone have any clue to why I'm experiencing this? The page loads with standard headers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML 5 is mentioned nowhere (if that has anything to do with it...).

Thanks.

Upvotes: 1

Views: 148

Answers (2)

MarioDS
MarioDS

Reputation: 13063

Those CSS rules are baked into your browser. Every browser has their own. This is why browser differences have been agonising web developers for years.

You can use a CSS reset or normaliser (plenty available on the web of both) to avoid this, or override them yourself.

Finally you should also be able to change these effectively in your browser, but then you should know that your web pages will look different than how everyone else sees them.

Upvotes: 1

Alan Piralla
Alan Piralla

Reputation: 1196

That's what some browsers do to present a decent default look on some tags. Just override them in your stylesheet once you detect them.

Upvotes: 1

Related Questions