Button Properties

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Majoraslayer
Forum Commoner
Posts: 64
Joined: Thu Jun 30, 2005 11:50 am
Location: In Your Mind...
Contact:

Button Properties

Post by Majoraslayer »

I was curious, how would I change the color and size of a submit button?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

CSS

You can manually set the dimensions and any style parameter either inline or in your CSS file
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Majoraslayer
Forum Commoner
Posts: 64
Joined: Thu Jun 30, 2005 11:50 am
Location: In Your Mind...
Contact:

Post by Majoraslayer »

I've not had much experience with creating my own CSS; I've only edited already existent css styelsheets. Do you mind showing me an example code of a submit button with a specified size and color? I would appreciate it, and I think I could take it from there.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

There are two ways to do it: inline and ..um.. non-inline - by declaring the properties in the stylesheet:

Code: Select all

<input type = &quote;submit&quote; style = &quote;width:50px;background-color:#FF0000;&quote;>

Code: Select all

<style type = &quote;text/css&quote;>
.mysubmit{
  width:50px;
  background-color:#FF0000;
}
</style>
...
<input type = 'submit' class = 'mysubmit'>
You could also just overwrite all "input" style and eliminate the need to make your submit button a special class. I wouldn't recommend that though as that tends to make radio buttons look like crap in IE.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Majoraslayer
Forum Commoner
Posts: 64
Joined: Thu Jun 30, 2005 11:50 am
Location: In Your Mind...
Contact:

Post by Majoraslayer »

I appreciate the help! Would the same code apply if the input type was a text box?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Why don't you try?

But to answer your question the style will apply to anything with that class unless you say otherwise.

So lets say you have td's, input's, and whatever else all the with the same class name, but you want only certain elements to get certain attributes, you can do the following

Code: Select all

<style>

.whitebg { 
  background-color: #FFF;
}

input.whitebg {
  padding: 3px;
}

</style>

<table> 
<tr>
<td class=&quote;whitebg&quote;> <input type=&quote;submit&quote; class=&quote;whitebg&quote;> </td>
</tr>
</table>
Post Reply