CSS'ing every submit button on a site.

richieboy · 28 Sep 2006 at 23:14

Hi chaps,

I have Googled for this, i may just be rubbish at finding stuff but i cant seem to find an answer that works for my problem.

I would like to style every submit button on my site the same way, im already using CSS etc (using SMF) and have been trying to edit the theme so all the buttons are uniform.

So far i have tried:

Code:

input.submit
{
 some properties
}

and

Code:

.submit
{
 some properties
}

and

Code:

submit
{
 some properties
}

etc but cannot get the style to implement unless i give every individual button a

Code:

class="submit"

tag and i would prefer not to go through the code and add this to every button if i don't have to!

Is there anyway to do this without me having to manually add the class tag to each button? At the moment all the buttons just go alone the lines of:

Code:

<input type="submit" name="submit">

Help? Am i doing something which just cannot be done? :confused:

iCraig · 28 Sep 2006 at 23:18

Well, if you want to apply global attributes to an element, in this case <input>

Why don't you just do:

Code:

input {
  style attributes
}

toosepin · 28 Sep 2006 at 23:25

Remember that browsers behave differentley when it comes to button and general form styling.

Have a play around - I'm sure you'll enjoy it

richieboy · 28 Sep 2006 at 23:30

iCraig said:
Well, if you want to apply global attributes to an element, in this case <input>

Why don't you just do:

Code:

input { style attributes }

Unfortunately i want the submit button to have slightly different attributes that input, select, etc - i would like it to be a darker colour and have different padding etc...any ideas?

richieboy · 28 Sep 2006 at 23:32

Here's what i have:

Code:

input, textarea, button, select
{
	font-size: 8pt;
	color: #000000;
	font-family: arial, Tahoma, helvetica, serif;
        background: #F9F9F9;
        border:	1px solid #BEBEBE;
        padding: 1px;
}

input.submit
{
        cursor:pointer;
	font-size: 8pt;
	padding: 0px;
        background: #E8E8E8;
        padding: 0px 3px;
        border: outset 1px #C6C6C6;
}

robmiller · 28 Sep 2006 at 23:46

You can do

Code:

input[type="submit"] {
    color:red;
}

But it's not supported in IE. If you want it to work in IE, you need to give each button a class I'm afraid.

richieboy · 28 Sep 2006 at 23:48

robmiller said:
You can do

Code:

input[type="submit"] { color:red; }

But it's not supported in IE. If you want it to work in IE, you need to give each button a class I'm afraid.

Rightio, thank god i can stop Googling - appreciate your help guys