Styled submit button?

HTML & CSS
1

I dont understand where the styles for the submit button are coming from
http://mvsr.org/secure/members.php
I’m just trying to make it 200px wide and to look like a standard button, but where is the background coming from?
Thanks…

2

The background seems to be a default color, depending on browser. You can just be explicit about it, if you want:

form input.button{
float:none;
font-size:12px;
padding:4px 2px;
border: none;
width:200px;
margin:0 auto;
[COLOR="Red"]background: #EBF4FB;[/COLOR]
}
3

not sure if the OP realized there was a style sheet just for the form elements, to clarify it is here: /css/secure-form.css

form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
.form{
border:solid 2px #b7ddf2;
background:#ebf4fb;
width:850px;
margin:0 auto;
}
h2 {
font-size:16px;
font-weight:bold;
border:0; margin:20px; padding:0;
text-align:left
}
.form p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
border:0; margin:0; padding:0;
}
form label{
display:block;
font-weight:bold;
text-align:right;
width:160px;
float:left;
font-size:12px;
margin-top:5px;
color:#666
}
form label.small {
width:150px;
text-align: left;
}
form input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 10px 10px;
}
form input.check {
width:50px;
margin:0 0 5px 5px;
height:20px;
}
form input.button{
float:none;
font-size:12px;
padding:4px 2px;
border: none;
width:200px;
margin:0 auto;
}
4

yes, that style sheet is what I have a question about, doesn’t the submit button follow the styles…

form input.button{
float:none;
font-size:12px;
padding:4px 2px;
border: none;
width:200px;
margin:0 auto;
[COLOR=#66cc66]}

[COLOR=Black]why is it 200px wide (appear to have the padding) plus no nborder (so I guess it sees those styles)
But why does it not look like a standard submit button

and it also seems to be floated

Thanks…

[/COLOR][/COLOR]

5

Which submit? To me, they both have borders and none of them look styled at all. And where is this class of “button”???

6

Hi,

I’m not quite sure what you are getting at here but I’ll explain what happens when you style a from element and your answer may be revealed with any luck.

First of all, as already mentioned above, form elements are styled via the browsers in-built style sheet which for some browsers you can actually find (Firefox’s main one is forms.css (there are others as dc has shown) which is in the res folder on my machine).

The browsers styling gives the initial look to the form element so that the element looks as has come to be expected. Therefore if you style some elements in a submit button you have to remember that the defaults may still show through such as the background.

However, once you start styling a form element (apart from text color) you will in most cases lose the “chrome” effects that the element has been given. e.g.if you add a border to a submit button you lose the round corners and you lose the two tone background colour of the submit button also and it is replaced with a default solid colour.

So all you need to remember is that once you start styling the form element any default browser effects may be lost (and replaced with normal default backgrounds) etc and cannot be re-instated with normal css.

Browsers vary on what is allowed to be styled and in what happens when things are changed and there is no easy way to style form elements consistently.

Regarding the width problem then some form elements use the “old box model” and padding and borders are accounted for inside the dimensions. The submit button and the select element both use the “old box model” commonly known as the broken box model. Text input boxes use the normal box model.

Form elements are replaced elements and can have intrinsic width and height and can have dimensions applied to them. That is they behave like inline-block elements rather than inline elements which is why you don;t need to declare them as display:block or to float them in order to apply dimensions. They behave much like an image would in those respects.

Hopefully the answer to your question was somewhere in there :slight_smile: