Question

I’m trying to create an alternate design to a site as a fallback. I can’t really change how the system is architected. A main stylesheet is loaded, and a second is loaded after it. I have control over the second stylesheet. There’s a lot of the CSS that I want to reset, specifically form elements.

However, I’m having difficulty with that. For example with a <button>:

background: rgb(88,222,255);
border-radius: 4px;
border: 1px solid #91d7eb;
box-shadow: 0px 2px 4px 0px rgba(1, 75, 138, .8);
color: #FFF;
cursor: pointer;
font-family: "Graphic-Font";
font-size: 25px;
font-weight: bold;
text-shadow: 0px 1px 3px #014b8a;
padding: 10px 40px;

While I can set background: none, border-radius: none` and so on, what happens is the button has no style, rather than the default browser style. I have to get the form elements to be the default browser style, among many other elements on the page. But I can’t seem to get at least the form elements to be unstyled.

For Clarity
Simplifying the question: How does one re-style a <button> back to default?

Answer 1

I would suggest using a CSS reset as a starting point (Eric Meyers’ is probably the most famous).

I think you’re running into trouble on things where you don’t want to set your own style, but return it to the browser default (e.g. you don’t want margin:0; on everything, you want the default big margin on the H1, the default smaller one on the p, etc.

You can actually get copies of the user agent stylesheets, modify them to make them more specific, and include them to overwrite. Here is a site that has copies of a lot of default UA stylesheets. A problem here is that every browser uses their own, so unless you browser detect and serve selective stylesheets, it’s not going to really look like it normally does for that browser. However, I think that’s ok. I’d actually suggest you just pick a browser default you like and set all browsers to look like that, or you can use the W3C’s suggestion for default browser styles.

All of this doesn’t solve your problem though, because styling form elements is hell. As soon as you apply a style, some browsers will switch the rendering mode for the form element so you can never get it back to the original style. For example, IE7 doesn’t support rounded corners, yet their default buttons have rounded corners, because it renders in Windows OS style. But as soon as you give the button a border, or some other style, it loses that nice Windows shaded rounded corner default look, and there’s no way to get it back without using an image!

So really, I wouldn’t shoot for trying to get browsers to go back to their native default style. I’d use a UA default stylesheet, and then modify it so make a sort of generic, cross-browser, cross-system default. It won’t look like the native unstyled code, but it will look close enough.