CSS / HTML文本未出现在联系表单中

Question

I have a contact form at the bottom of http://www.bellasharvest.com.au/ and I just realised that the white text is no longer there...

Relevant HTML:

  <div id="contact">
    <div id="message"></div>
    <form method="post" action="send_form_email.html"  webstripperwas="send_form_email.php" name="contactform" id="contactform">
      <fieldset>
      <div class="alignleft padding-right">
        <label for="name" accesskey="U"><span class="required">Name</span></label>
        <input name="name" type="text" id="name" size="30" title="Name" />
        <label for="email" accesskey="E"><span class="required">Email</span></label>
        <input name="email" type="text" id="email" size="30" title="Email" />
        <label for="phone" accesskey="P"><span class="required">Phone</span></label>
        <input name="phone" type="text" id="phone" size="30" title="Phone" class="third" />
      </div>
      <label for="comments" accesskey="C"><span class="required">Comments</span></label>
      <textarea name="comments" cols="40" rows="3" id="comments" title="Comment"></textarea>
      <input type="submit" class="submit" id="submit" value="Submit" />
      </fieldset>
    </form>
  </div>

Relevant CSS:

#contact label { display: none; float: none; height:0px; }

/* I think the error is somewhere below: *********** */
#contact input, textarea, select { width: 272px; padding: 10px 13px 11px 13px; border: 1px solid #242424; margin: 0px 0px 20px 0; font: 14px "Palatino Linotype", "Book Antiqua", Palatino, serif; color:#c7c7c7;  float:none; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; background:url(../images/bg-shade.png) repeat; float:none; display:block;}

#contact input.third { margin: 0px 0px 0px 0 !important; }
#contact textarea { margin-bottom:4px; margin-right:0px !important;}
#contact #subject { width: 292px !important; }
#contact input:focus, textarea:focus, select:focus { border: 1px solid #1f1f1f; }
#contact input.submit { display:block; text-transform:uppercase; cursor:pointer; position:relative; padding:8px 14px 8px 13px !important; margin:19px 0 18px 0;  font-weight:700; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#242424; text-align:center; font-size:12px; line-height:20px; -webkit-transition: all 0.1s ease-in-out 0s; background:url(../images/bg-submit.png) 0 0 no-repeat; width:auto !important; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; border:0px;}
#contact input.submit:hover {  }

I believe the error lies in the line that I've labelled. I've tried changing the font and changing the transitions but I haven't managed to get it to work.

Thanks for your help.

Answer 1

Use the placeholder attribute on your input. Like here : <input name="name" type="text" id="name" size="30" title="Name" placeholder="Name" />

I think this is what you want.