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">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<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>
<div>
<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>
</select>
</label>
<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>
<label for="maybe">
<input id="maybe" type="radio" name="rec" value="maybe" class="pick" />maybe
</label>
<label for="no">
<input id="no" type="radio" name="rec" value="no" class="pick" />no
</label>
</fieldset>
<fieldset>
<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>
</select>
</label>
</fieldset>
<fieldset> What should we do more of?
<label for="challenges">
<input id="challenges" type="checkbox" name="recs" value="challenges" class="pick" />Challenges
</label>
<label for="forum">
<input id="forum" type="checkbox" name="recs" value="forum" class="pick" />Forum topics
</label>
<label for="tutorials">
<input id="tutorials" type="checkbox" name="recs" value="tutorials" class="pick" />Video tutorials
</label>
<label for="wiki">
<input id="wiki" type="checkbox" name="recs" value="wiki" class="pick" />Wiki articles
</label>
</fieldset>
<fieldset>
<label for="comments">Any additional comments or suggestions?
<textarea id="comments" name="comments" rows="3" cols="30" placeholder="Enter your comment here..."></textarea>
</label>
</fieldset>
<input id="submit" name="submit" type="submit" value="Submit" />
<form>
</div>
<p class="footnote">Form created by Ludwika Mair (Hi!)</p>
<p class="footnote">Photo by <a href="https://unsplash.com/@jacksonsophat?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jackson Sophat</a> on <a href="https://unsplash.com/photos/_t-l5FFH8VA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>
</body>
</html>
body {
width: 100%;
height: 150vh;
max-height:
margin: 0;
font-family: Avenir, sans-serif;
font-size: 16px;
color: white;
background-image: url("https://images.unsplash.com/photo-1621839673705-6617adf9e890?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80");
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);
}
fieldset{
border: none;
padding: 0.5rem 0;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
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/113.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
thanks again!