Styling a web contact form

Discussion in 'Web Design and Development' started by ghall, Jul 20, 2011.

  1. ghall macrumors 68040

    ghall

    Joined:
    Jun 27, 2006
    Location:
    Rhode Island
    #1
    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:

    Code:
    /*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:

    Code:
    		<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?
     

    Attached Files:

  2. dkotter macrumors member

    Joined:
    Jul 30, 2009
    #2
    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.
     
  3. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #3
    or just give your submit button an ID that will override the button class.
     
  4. ghall thread starter macrumors 68040

    ghall

    Joined:
    Jun 27, 2006
    Location:
    Rhode Island
    #4
    I ended up doing that. Worked like a charm.

    Thanks everyone. :)
     

Share This Page