Hi everyone–I just completed my survey form and would love some feedback!
One thing I was unable to figure out: how can I make the default font color of the dropdown box gray (to match other placeholder text on the page) when it is the default “Select an option”, but then turn white once an actual answer is selected?
Thank you!
Your form looks good @jcbecker17. Some things to revisit;
body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
head element has a specific function. You can review this for an understanding of the HTML boilerplate tagsI ran the following search “css change dropdown font color” and came up with a few hits. Did none in your search answer your question?
@Roma --thanks so much for sharing the boilerplate tags article! I definitely have a better understanding of how to use them moving forward. The validator you shared is also a huge help. The error messages are really clear, so I was able to fix everything that it suggested.
As for the dropdown styling, I did read several answers to similar questions on stack overflow and a couple other places, but so far have not gotten any of the solutions to work.
Hey there I don’t know if you’re having the same problem with the color of the font inside the dropdown lists, but I had the same problem and it was driving me mad. I was able to simply add a color: gray; situation in my style sheet for the select element’s (dropdown) id, and it fixed the problem. I used the same color for the form input. I hope it works for you, I feel a little stupid suggesting something you’ve probably already tried though. You can take a look at my code if you like, it’s a right mess though, it’s only the second thing I’ve ever written.
<html>
<head>
<title>freeCodeCamp Survey Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');
html {
background: url("https://res-3.cloudinary.com/fieldfisher/image/upload/c_lfill,g_auto/f_auto,q_auto/v1/sectors/technology/tech_neoncircuitboard_857021704_medium_lc5h05");
background-size: cover;
font-family: Roboto;
background-attachment: fixed;
}
body {
height: 100%;
}
h1 {
text-align: center;
color: rgb(244, 245, 248);
padding-top: 6%;
font-size: 2.25em;
}
#description {
text-align: center;
color: rgb(244, 247, 248);
font-style: italic;
}
#form-container {
margin-top: 5%;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 70%;
background-color:rgba(57, 42, 122, 0.767)
}
#form {
padding: 50px;
}
#name, #email, #number, #dropdown, #dropdown2 {
display: block;
width: 100%;
color: grey;
}
label {
color: white;
font-size: 1.5em;
vertical-align: middle;
}
input, textarea, select {
min-width: 1.5em;
min-height: 2em;
vertical-align: middle;
font-family: inherit;
}
#dropdown, #dropdown2 {
font-family: Roboto;
}
textarea {
width: 100%;
height: 7em;
}
button {
font-family: Roboto;
}
.submit {
text-align: center;
}
</style>
</head>
<body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
<div id="form-container">
<div id="form">
<form id="survey-form">
<section>
<div class="text-input"><label class="title" id="name-label">Name</label><input id="name" type="text" placeholder="Enter your name" required></div>
<div class="text-input"><label class="title" id="email-label">Email</label><input input type="email" id="email" type="text" placeholder="Enter your email" required></div>
<div class="text-input"><label class="title" id="number-label">Age (optional)</label><input id="number" type="number" placeholder="Enter your age" min="0" max="99" required></div>
</section>
<div><label for="dropdown1" class="title">What option best describes your current role?</label></div>
<div>
<select id="dropdown" name="Select current role">
<option value="select current role" disabled selected>Select current role</option>
<option value="Student">Student</option>
<option value="Full time job">Full time job</option>
<option value="Full time learner">Full time learner</option>
<option value="Prefer not to say">Prefer not to say</option>
<option value="Other">Other</option>
</select>
</div>
<section>
<div><label for="definitely"><input id="definitely" type="radio" name="recommend?" value="definitely" checked>Definitely</label></div>
<div><label for="maybe"><input id="maybe" type="radio" name="recommend?" value="maybe">Maybe</label></div>
<div><label for="not-sure"><input id="not-sure" type="radio" name="recommend?" value="not sure">Not sure</label></div>
</section>
<div><label for="dropdown2" class="title">What is your favorite feature of freeCodeCamp?</label></div>
<div>
<select id="dropdown2" name="favorite feature">
<option value="select an option" disabled selected>Select an option</option>
<option value="Challenges">Challenges</option>
<option value="Projects">Projects</option>
<option value="Community">Open Source</option>
<option value="Full time learner">Full time learner</option>
</select>
</div>
<label for="checkbox-section">What would you like to see improved?</label>
<section id="checkbox-section">
<div><label for="1"><input type="checkbox" name="improve?" value="Front-end Projects" class="clickable" id="1">Front-end Projects</label></div>
<div><label for="2"><input type="checkbox" name="improve?" value="Back-end Projects" class="clickable" id="2">Back-end Projects</label></div>
<div><label for="3"><input type="checkbox" name="improve?" value="Data Visualization" class="clickable" id="3">Data Visualization</label></div>
<div><label for="4"><input type="checkbox" name="improve?" value="Challenges" class="clickable" id="4">Challenges</label></div>
<div><label for="5"><input type="checkbox" name="improve?" value="Open Source Community" class="clickable" id="5">Open Source Community</label></div>
<div><label for="6"><input type="checkbox" name="improve?" value="Gitter help rooms" class="clickable" id="6">Gitter help rooms</label></div>
<div><label for="7"><input type="checkbox" name="improve?" value="Videos" class="clickable" id="7">Videos</label></div>
<div><label for="8"><input type="checkbox" name="improve?" value="City Meetups" class="clickable" id="8">City Meetups</label></div>
<div><label for="9"><input type="checkbox" name="improve?" value="Wiki" class="clickable" id="9">Wiki</label></div>
<div><label for="10"><input type="checkbox" name="improve?" value="Forum" class="clickable" id="10">Forum</label></div>
<div><label for="11"><input type="checkbox" name="improve?" value="Additional Courses" class="clickable" id="11">Additional Courses</label></div>
</section>
<label for="textarea">Any comments or suggestions?</label>
<div><textarea id="textarea" type="text" placeholder="Enter your comment here..."></textarea></div>
<div class="submit"><button id ="submit" type="submit">Submit</button></div>
</form>
</div>
</div>
</body>
</html>