default browser css not being overwritten

Question

I have started a new site (http://energyamplified.co.za/home.php) and for the life of me I cannot figure this out, I am attempting to overwrite the browsers (webkit and moz currently in testing) default values for the placeholder text. I have tried setting the type of the text, using !important (which I never want to do) in order to overwrite the DarkGray default of the browser, using external sites to test the CSS, it works fine - I cannot figure this out.

THE HTML Code:

                <header>
                    <h1>Contact Us</h1>
                </header>
                <div id="contact_email"><a href="mailto:info@energyamplified.co.za">info@energyamplified.co.za</a></div>
                 <div id="contact_wrapper">
                 <form method="post" name="contactform" id="contactform">   

                <fieldset>
                <div id="form_left">
                <p><label for="name" accesskey="U"><span class="required"></span></label>
                <input name="name" type="text" id="name" size="50" value="" placeholder="Name"/></p>
                <p><label for="email" accesskey="E"><span class="required"></span></label>
                <input name="email" type="text" id="email" size="50" value=""  placeholder="Email"/></p>
                <p><label for="phone" accesskey="P"><span class="optional"></span></label>
                <input name="phone" type="text" id="phone" size="50" value=""  placeholder="Phone (optional)"/></p>
                </div>

                <div id="form_right">
                <p><label for="comments" accesskey="C"><span class="required"></span></label>
                <textarea name="comments"  rows="8" cols="40"  id="comments" style="width: 450px;" placeholder="Type message here..."></textarea></p> 

                <div id="bot"><p><span class="required">*</span> Are you a bot?</p></div> 
                <div id="spam">
                <div id="spam_2">
                <label for="verify" accesskey="V"><img src="image.php" alt="" /></label>
                <input name="verify" type="text" id="verify" size="5"/></div>
                <input type="submit" class="submit" id="submit" value="Submit" />
                </div>
                </fieldset>
                </form>
                </div>
                </div>

The CSS:

::-webkit-input-placeholder { /* Chrome */
color: #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:    #000;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:    #000;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:    #000;
}

[type="text"] {
    -moz-appearance:    textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
}

Answer 1

Your style sheet has a bug:

input#name, input#email,input#phone { border: 0; background-color: #F0EDED; {

Change it to

input#name, input#email,input#phone { border: 0; background-color: #F0EDED; }

Typo in the closing brace is the problem!