Page 1 of 1

Button Properties

Posted: Mon Jul 11, 2005 5:11 pm
by Majoraslayer
I was curious, how would I change the color and size of a submit button?

Posted: Mon Jul 11, 2005 5:31 pm
by pickle
CSS

You can manually set the dimensions and any style parameter either inline or in your CSS file

Posted: Mon Jul 11, 2005 5:35 pm
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.

Posted: Mon Jul 11, 2005 5:41 pm
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.

Posted: Mon Jul 11, 2005 5:49 pm
by Majoraslayer
I appreciate the help! Would the same code apply if the input type was a text box?

Posted: Mon Jul 11, 2005 6:03 pm
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>