Re: [WSG] Reset the styles on a submit button with CSS
On Tue, May 6, 2008 at 1:52 PM, Paul Collins [EMAIL PROTECTED] wrote: My issue is that the submit buttons now have this styling also in certain browsers. I'd like to give them a class and set them back to their original look, but background:none; doesn't work. Is there a way of doing this does anyone know? Not quite what you asked, but have you considered using the button element for your submit button instead of an input? Removes this kind of annoyance. -- - Matthew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Reset the styles on a submit button with CSS
Hi Paul,
You could put them in two separate containers/divs and give the one
containing the form elements you want to style an id.
Doesn't have to be a div though. You could use a list, or anything else that
is containing the form inputs you want to style.
For example:
div id=cont1
input /
input /
input /
/div
input submit /
Then use:
#cont1 input {background:#000; color:#FFF;}
That way the submit button wont be affected.
Darren Lovelock
Munky Online Web Design
http://www.munkyonline.co.uk
T: +44 (0)20-8816-8893
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Paul Collins
Sent: 06 May 2008 13:52
To: wsg@webstandardsgroup.org
Subject: [WSG] Reset the styles on a submit button with CSS
Hi all,
Here's an odd one I can't seem to solve. I had to style all input fields in
a form with a black background, white text. Rather than give them a class,
I've just given all inputs this styling
EG: input {background:#000; color:#FFF;}
My issue is that the submit buttons now have this styling also in certain
browsers. I'd like to give them a class and set them back to their original
look, but background:none; doesn't work. Is there a way of doing this does
anyone know?
I am aware that I could give every field a class and add the black
background to that, but I'd like to do it the other way around and only have
a class for the buttons, less classy!
Any ideas?
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Reset the styles on a submit button with CSS
Or, instead of using a class to reset the layout to original, why not set a class for the elements you actually are styling? When I use use INPUT elements I allways add a class related to what kind of input element it is and only refer to the class in the CSS. Recently I've started to use attribute selectors instead as it'll simply fall back to default UI elements if the UA doesn't support it. I'm not sure if you will be able to reset a form element to use the OS UI once you've assigned. -Thom From: Matthew Pennell Sent: Tuesday, May 06, 2008 3:00 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Reset the styles on a submit button with CSS On Tue, May 6, 2008 at 1:52 PM, Paul Collins [EMAIL PROTECTED] wrote: My issue is that the submit buttons now have this styling also in certain browsers. I'd like to give them a class and set them back to their original look, but background:none; doesn't work. Is there a way of doing this does anyone know? Not quite what you asked, but have you considered using the button element for your submit button instead of an input? Removes this kind of annoyance. -- - Matthew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Reset the styles on a submit button with CSS
The style background:none is in reference to the background-image
property, which is why it doesn't work.
background:transparent seems to be the most likely candidate as this relates
to the background-color property but there doesn't seem to be a
background:default setting which would be very useful for your case.
I know it's not brilliant, but perhaps you should apply the stylings the
other way around, leave the general inputs unstyled and apply the class to
all other elements. Either that or style the submit buttons yourself with a
custom background image.
Steve
Steve Workman
*PA* Consulting Group
123 Buckingham Palace Road
London SW1W 9SR
United Kingdom
Direct dial: +44 207 881 3732
[EMAIL PROTECTED]
*www.paconsulting.com* http://mail.google.com/mail/www.paconsulting.com
On 06/05/2008, Paul Collins [EMAIL PROTECTED] wrote:
Hi all,
Here's an odd one I can't seem to solve. I had to style all input
fields in a form with a black background, white text. Rather than give
them a class, I've just given all inputs this styling
EG: input {background:#000; color:#FFF;}
My issue is that the submit buttons now have this styling also in
certain browsers. I'd like to give them a class and set them back to
their original look, but background:none; doesn't work. Is there a way
of doing this does anyone know?
I am aware that I could give every field a class and add the black
background to that, but I'd like to do it the other way around and
only have a class for the buttons, less classy!
Any ideas?
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Reset the styles on a submit button with CSS
You can use CSS selectors:
input[type=text],input[type=password],input[type=checkbox],input[type=radio]
{background:#000; color:#FFF;}
But this doesn't work in IE6...
On Tue, May 6, 2008 at 2:00 PM, Matthew Pennell [EMAIL PROTECTED]
wrote:
On Tue, May 6, 2008 at 1:52 PM, Paul Collins [EMAIL PROTECTED]
wrote:
My issue is that the submit buttons now have this styling also in
certain browsers. I'd like to give them a class and set them back to
their original look, but background:none; doesn't work. Is there a way
of doing this does anyone know?
Not quite what you asked, but have you considered using the button
element for your submit button instead of an input? Removes this kind of
annoyance.
--
- Matthew
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Samuel Santos
http://www.samaxes.com/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Reset the styles on a submit button with CSS
Paul Go have a look at http://nickcowie.com/presentation/s5-button.html it should show what you can and can't style on input type submit (particularly safari/camino), and what you can do with the button element. Note it is a couple of years old and I don't use the button element at the moment. Waiting for XHTML-MP 1.2 to get into common use. 2008/5/6 Matthew Pennell [EMAIL PROTECTED]: On Tue, May 6, 2008 at 1:52 PM, Paul Collins [EMAIL PROTECTED] wrote: My issue is that the submit buttons now have this styling also in certain browsers. I'd like to give them a class and set them back to their original look, but background:none; doesn't work. Is there a way of doing this does anyone know? Not quite what you asked, but have you considered using the button element for your submit button instead of an input? Removes this kind of annoyance. -- - Matthew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Reset the styles on a submit button with CSS
Thanks for taking the time to reply everyone. Much appreciated.
Not quite what you asked, but have you considered using the button element
for your submit button instead of an input? Removes this kind of annoyance.
Yes, I did forget about that one. However though, I'm stuck in this
.NET vortex and I don't have much control over field elements.
You could put them in two separate containers/divs and give the one
containing the form elements you want to style an id.
Doesn't have to be a div though. You could use a list, or anything else that
is containing the form inputs you want to style.
I think you're right Darren. I can just add an ID to the fieldset. Makes sense.
You can use CSS selectors:
input[type=text],input[type=password],input[type=checkbox],input[type=radio]
{background:#000; color:#FFF;}
But this doesn't work in IE6...
Thanks Samuel. I am already using them actually, IE6 is the one
browser that's causing the problem :) No surprise there of course!
Cheers and thanks for your help.
2008/5/6 Nick Cowie [EMAIL PROTECTED]:
Paul
Go have a look at http://nickcowie.com/presentation/s5-button.html
it should show what you can and can't style on input type submit
(particularly safari/camino), and what you can do with the button element.
Note it is a couple of years old and I don't use the button element at the
moment. Waiting for XHTML-MP 1.2 to get into common use.
2008/5/6 Matthew Pennell [EMAIL PROTECTED]:
On Tue, May 6, 2008 at 1:52 PM, Paul Collins [EMAIL PROTECTED]
wrote:
My issue is that the submit buttons now have this styling also in
certain browsers. I'd like to give them a class and set them back to
their original look, but background:none; doesn't work. Is there a way
of doing this does anyone know?
Not quite what you asked, but have you considered using the button
element for your submit button instead of an input? Removes this kind of
annoyance.
--
- Matthew
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Nick Cowie
http://nickcowie.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Reset the styles on a submit button with CSS
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Steven Workman Sent: Tuesday, May 06, 2008 6:19 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Reset the styles on a submit button with CSS The style background:none is in reference to the background-image property, which is why it doesn't work. background:transparent seems to be the most likely candidate as this relates to the background-color property but there doesn't seem to be a background:default setting which would be very useful for your case. I'd say background:none and background:transparent are the same, because shorthand default to using initial values: background-image: none background-color: transparent -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
