**I’ve tried everything I can think of to style the font family and size in the options in my dropdown lists. Everything I google implies that the only way is by using javascript, but I thought that I wouldn’t need to use javascript yet in these challenges. Is there any css method to style the fonts? I know my code is a hot mess, sorry, it’s the second thing I’ve ever written. Thanks so much for any help. ps. I have no idea why my style sheet isn’t included in the scrolling box with the rest of my html code. **
**
<html>
<head>
<title>freeCodeCamp Survey Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&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%;
}
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;
}
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>
**
Your browser information: google chrome
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.
Challenge: Build a Survey Form
Link to the challenge:
