Survey Form - Build a Survey Form Placeholder Color

Tell us what’s happening:
Hi guys, I’m done with this project, it passes the test and I’m overall happy with it. However, for some reason I cannot seem to be able to change the placeholder color in the textarea, it stays grey in browser and should be white - can anyone help me? It’s really bugging me. Thanks a lot! I am including both html and css below, hopefully I’m doing it right. Best - Lu
Your code so far

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description" class="description">Thank you for taking the time to help us improve the platform.</p>
  <form id="survey-form">
    <label id="name-label" for="name" name="name">Name (required)<input id="name" type="text" placeholder="Enter your name" required /></label>
    <label id="email-label" for="email" name="email">Email (required)<input id="email" type="email" placeholder="Enter your Email" required /></label>
    <label id="number-label" for="number" name="age">Age<input id="number" type="number" min="13" max="120" placeholder="Age" /></label>
    <label for="dropdown">What is your current primary occupation?
      <select id="dropdown" name="occupation">
        <option value="">Select your occupation</option>
        <option value="1">Student</option>
        <option value="2">Full-time job</option>
        <option value="3">Full-time learner</option>
        <option value="4">Full-time parent</option>
        <option value="5">Prefer not to say</option>
        <option value="6">Other</option>
    <fieldset>Would you recommend freeCodeCamp to a friend?
      <label for="definitely">
       <input id="definitely" type="radio" name="rec" value="definitely" class="pick" checked />definitely
     <label for="maybe">
       <input id="maybe" type="radio" name="rec" value="maybe" class="pick" />maybe
     <label for="no">
       <input id="no" type="radio" name="rec" value="no" class="pick" />no
      <label for="referrer">How did you find out about freeCodeCamp?
        <select id="referrer" name="referrer">
          <option value="">Select one</option>
          <option value="1">From a friend</option>
          <option value="2">On social media</option>
          <option value="3">Industry article</option>
          <option value="4">At my educational institution</option>
          <option value="5">Other</option>
    <fieldset> What should we do more of?
      <label for="challenges">
       <input id="challenges" type="checkbox" name="recs" value="challenges" class="pick" />Challenges
     <label for="forum">
       <input id="forum" type="checkbox" name="recs" value="forum" class="pick" />Forum topics
     <label for="tutorials">
       <input id="tutorials" type="checkbox" name="recs" value="tutorials" class="pick" />Video tutorials
     <label for="wiki">
       <input id="wiki" type="checkbox" name="recs" value="wiki" class="pick" />Wiki articles
     <label for="comments">Any additional comments or suggestions?
        <textarea id="comments" name="comments" rows="3" cols="30" placeholder="Enter your comment here..."></textarea>
    <input id="submit" name="submit" type="submit" value="Submit" />
<p class="footnote">Form created by Ludwika Mair (Hi!)</p>
<p class="footnote">Photo by <a href="">Jackson Sophat</a> on <a href="">Unsplash</a></p>

body {
  width: 100%;
  height: 150vh;
  margin: 0;
  font-family: Avenir, sans-serif;
  font-size: 16px;
  color: white;
  background-image: url("");
  background-position: center;
  background-repeat: repeat;
  background-size: cover;

h1, p {
  margin: 1em auto;
  text-align: center;
.description {
  font-style: italic;
  margin: 0 0 2em 0;
div {
  width: 70vw;
  min-width: 30vw;
  margin: 0 auto;
  background-color: hsla(325, 69%, 61%, 0.6);
  padding: 10px 30px;
  border-radius: 15px;
  box-shadow: 0px 0px 10px 5px rgba(112, 111, 111, 0.6);

  border: none;
  padding: 0.5rem 0;

label {
  display: block;
  margin: 0.5rem 0;

select {
  color: #ffffff;
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
  border-radius: 6px;
  border: 1px solid rgba(112, 111, 111, 0.6);
  background-color: rgba(112, 111, 111, 0.4);

input::placeholder {
  color: white;

.pick {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;

input[type="submit"] {
  display: block;
  width: 100%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: rgba(112, 111, 111, 0.7);;
  border-color: rgba(112, 111, 111, 0.7);
  min-width: 300px;
  box-shadow: 0px 0px 2px 2px rgba(112, 111, 111, 0.9);

a {
  color: white;

.footnote {
  font-size: 13px;
  margin: 0;
  padding: 20px 0 0 0;

.footnote:last-of-type {
  padding: 0 0 10px 0;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Do you have this in a codepen or anywhere that we can actually see the form in action?

Hey, thank you for your reply!
Yes, I copied it into codepen, here it is:

This will target all inputs, but the area that is grey is not an input its a text area. So you need to add another style for the text area, or you could get rid of the above line and use


Which will target all placeholders for you.


yay, it worked, thank you so much for your quick help! and I learnt something new :slight_smile: thanks again!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.