Styling a web contact form

[ghall]

So I've been trying to set up a contact form for a website, and I have been trying to style it so it will fit into the design of the rest of the page. So functionally, the form works perfectly, but I'm having an issue with the submit button ignoring the CSS I wrote for it and taking on the style of the text input boxes (which looks very stupid).

Here's the CSS for the form:

/*contact form*/
#contact-area {
	width: 600px;
	position: relative;
	top: 300px;
	right: -50px;
	z-index: 1
}
#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 471px;
	font-size: 15px;
	color: #575757;
	line-height:18px;
	font-family:Trebuchet MS;
	text-shadow:#fff 0px 1px 0, #000 0 -1px 0;
	border: 1px solid white;
	border-radius: 10px;
	background-image: -moz-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#bfbfbf), to(#fcfcfc), color-stop(10%, #d9d9d9), color-stop(88%, #f2f2f2), color-stop(97%, #f7f7f7));
	box-shadow: inset 0 1px 0 white;
}
#contact-area textarea {
	height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
	border: 1px solid blue;
}
.button
{ border: font-size: 11px; color: #FFFFFF; font-weight: normal; font-family: arial; background-color: #CC0000; text-decoration: none;
}
label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 20px;
	color: #575757;
	line-height:23px;
	font-family:Trebuchet MS;
	text-shadow:#fff 0px 1px 0, #000 0 -1px 0;
}

And here's the HTML:

		<div id="contact-area">
			
			<form method="post" action="contactengine.php">
				<label for="Name">Name:</label>
				<input type="text" name="Name" id="Name" />
	
				<label for="Email">Email:</label>
				<input type="text" name="Email" id="Email" />
				
				<label for="Message">Message:</label><br />
				<textarea name="Message" rows="20" cols="20" id="Message"></textarea>

				<input type="submit" name="submit" value="Send" class="button" />

			</form>
			
			<div style="clear: both;"></div>

Am I missing something?

 

[dkotter]

You're styling the input button using the class .button, but it will also inherit the styles from the #contact-area input rule, since the submit button is an input. Probably the easiest way to fix the issue is to add input[type=text] to the input rule, which will make it only target input elements that are text, not submit buttons.

 

[manueld]

or just give your submit button an ID that will override the button class.

 

[ghall]

You're styling the input button using the class .button, but it will also inherit the styles from the #contact-area input rule, since the submit button is an input. Probably the easiest way to fix the issue is to add input[type=text] to the input rule, which will make it only target input elements that are text, not submit buttons.

I ended up doing that. Worked like a charm.

Thanks everyone.