Turn off style for a specific element?

March 19, 2009 6:51 AM

Turn off style for a specific element?

I have a website that uses stylesheets that affect my input submit button. For one specific button on the site I want to show an input submit button that is completely default, meaning no style affecting it. Is there a style tag I can use to disable stylesheets for a specific element on the page?

posted by doomtop to Computers & Internet (11 answers total)

You should be able to solve this problem by coming at it backwards: style the other submit buttons as named elements (#submitbuttonone) or classes (.styledsubmitbutton) and simply don't style the button you want to leave unstyled.

However, you should note that 'default' submit buttons do differ from browser to browser. You might want to explore so-called 'reset styles'.
posted by jzed at 7:02 AM on March 19, 2009

Response by poster: @jzed: I would agree with you, the problem is that I don't control the stylesheets for the site, I can just put code into the body of the page.
posted by doomtop at 7:17 AM on March 19, 2009

Ah. Tricky. I don't think there is a direct way of doing this (perhaps someone can prove me wrong?). Inline style do take preference over external stylesheets though... your best bet might be to create a style that mimics the 'default' styling and apply that inline.
posted by jzed at 7:35 AM on March 19, 2009

Or you can cheat and just use an input where type="image" and src="picture of your unstyled button"
posted by uandt at 7:42 AM on March 19, 2009

Response by poster: @uandt: I might end up doing that. Thanks!

@jzed: That's what I was thinking I'd have to do, but I am not sure how to figure out what I would need to mimic the default styling. I am not good enough with CSS or basic design to fiugre it out on my own. You don't happen to know of a website that has this figured out already?
posted by doomtop at 7:51 AM on March 19, 2009

This link might offer a few tips... it's less a case of just applying a default syle than a case of figuring out what custom css has been applied to the buttons on the site you are working on and counteracting that. If you could post up the css for that we could probably help more (you may find the Firebug extension for Firefox useful for examining the CSS code of individul elements).
posted by jzed at 8:12 AM on March 19, 2009

You could (probably) insert an IFRAME to embed a separate tiny page with no stylesheet, then layer a transparent DIV with an onClick="form.submit()" handler over it to catch the user's click and submit the form, using inline style="" attributes to set their positions and z-index.
posted by nicwolff at 8:40 AM on March 19, 2009

You could try javascript:
document.getElementById('yourElement').style.cssText = '';
posted by the jam at 11:29 AM on March 19, 2009

Response by poster: @the jam: I'd like to try that out, but I'm not sure I understand how. The element in question is:

Can you help me put that into the JS script?
posted by doomtop at 2:24 PM on March 19, 2009

Response by poster: Guess I should have realized you can't just put code into here. It looks like this kind of:

[input type="submit" name="sa" value="Search"]
posted by doomtop at 2:33 PM on March 19, 2009

Once you figure out which styles are being applied, then you can just over-ride them using inline CSS.

If the external CSS is giving it a colour and a background image, for instance, you could just write:

<input style="color:black;background-image:none;">

and so on (there's no such thing as "color:none").
posted by AmbroseChapel at 6:09 PM on March 19, 2009