Tell us what’s happening:
I created a textaera with a 100px height, and within it i have an input of the same height
but on the display the input box is higher than the textaera one …
Your code so far
<h1 id="title">freeCodeCamp Survey Form</h1>
<h2 id="description">Thank you for taking the time to help us improve the platform</h2>
<div id="content">
<form id="survey-form">
<div id="name">
<label id="name-label">Name</label>
<input type="text" placeholder=" Enter your name" class="input-head">
</div>
<div id="email">
<label id="email-label">Email</label>
<input type="text" placeholder=" Enter your Email" class="input-head">
</div>
<div id="number">
<label id="number-label">Age(optional)</label>
<input type="text" placeholder=" Age" class="input-head">
</div>
<div id="dropdown-option">
<label id="dropdown-option-label">Which option best describes your current role?</label>
<select id="dropdown-option-select" name="dropdown-option-name">
<option value="Select current role" selected disabled>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>
<div id="recommendation">
<label id="recommendation-label">
Would you recommend freeCodeCamp to a friend?</label>
<p id="para-definitely"><input type='radio' id='definitely' name='radio-recommendation' checked><label for="definitely" id="definitely-label">Definitely</label></p>
<p id="para-maybe"><input type='radio' id='maybe' name='radio-recommendation'><label for="maybe" id="maybe-label">Maybe</label></p>
<p id="para-not-sure"><input type='radio' id='not-sure' name='radio-recommendation'><label for="not-sure" id="not-sure-label">Not sure</label></p>
</div>
<div id="dropdown-feature">
<label id="dropdown-feature-label">What is your favorite feature of freeCodeCamp?</label>
<select id="dropdown-feature-select" name="dropdown-feature-name">
<option value="Select an option" selected disabled>Select an option</option>
<option value="Challenges">Challenges</option>
<option value="Projects">Projects</option>
<option value="Community">Community</option>
<option value="Open Source">Open Source</option>
</select>
</div>
<div id="improvement">
<p><label id="improvement-label">What would you like to see improved? (Check all that apply)</label></p>
<p class="para-improvement"><input type="checkbox" id="front-end-projects" name="improvement-box" value="front-end-projects"><label for="front-end-projects" class="improvement-box-label">Front-end Projects</label></p>
<p class="para-improvement"><input type="checkbox" id="back-end-projects" name="improvement-box" value="back-end-projects"><label for="back-end-projects" class="improvement-box-label">Back-end Projects</label></p>
<p class="para-improvement"><input type="checkbox" id="data-visualization" name="improvement-box" value="data-visualization"><label for="data-visualization" class="improvement-box-label">data-visualization</label></p>
<p class="para-improvement"><input type="checkbox" id="challenges" name="improvement-box" value="challenges"><label for="challenges" class="improvement-box-label">Challenges</label></p>
<p class="para-improvement"><input type="checkbox" id="open-source-community" name="improvement-box" value="open-source-community"><label for="open-source-community" class="improvement-box-label">Open Source Community</label></p>
<p class="para-improvement"><input type="checkbox" id="gitter-help-rooms" name="improvement-box" value="gitter-help-rooms"><label for="gitter-help-rooms" class="improvement-box-label">Gitter help rooms</label></p>
<p class="para-improvement"><input type="checkbox" id="videos" name="improvement-box" value="videos"><label for="videos" class="improvement-box-label">Videos</label></p>
<p class="para-improvement"><input type="checkbox" id="city-meetups" name="improvement-box" value="city-meetups"><label for="city-meetups" class="improvement-box-label">City Meetups</label></p>
<p class="para-improvement"><input type="checkbox" id="wiki" name="improvement-box" value="wiki"><label for="wiki" class="improvement-box-label">Wiki</label></p>
<p class="para-improvement"><input type="checkbox" id="forum" name="improvement-box" value="forum"><label for="forum" class="improvement-box-label">Forum</label></p>
<p class="para-improvement"><input type="checkbox" id="additional-courses" name="improvement-box" value="additional-courses"><label for="additional-courses" class="improvement-box-label">Additional Courses</label></p>
</div>
<div id="comment">
<label id="comment-label">Any comments or suggestions?</label>
<textaera id="textaera" name="textaera"><input type='text' placeholder="Enter your comment here" id="input-textaera">
</textaera>
</div>
<div id="submit">
<button type="submit" id="button-submit">Submit</button>
</div>
</form>
</div>
</main>
main {
color: white;
background-image: url(https://www.marchesaintpierre.com/2064-large_default/tulle-uni-bleu-roi.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
font-family: sans-serif;
}
#title {
text-align: center;
font-weight: 500;
letter-spacing: 1px;
padding-top: 35px;
font-size: 31px;
}
#description {
text-align: center;
font-size: 18px;
font-weight: 10;
font-style: italic;
}
#content {
background-color: rgba(25,25,112);
margin-right:25%;
margin-left:25%;
border-radius:5px;
}
#name,#email,#number,#dropdown-option,#recommendation,#dropdown-feature {
display:flex;
flex-direction:column;
margin-right:7%;
margin-left: 7%;
padding-top: 30px;
}
#name-label,#email-label,#number-label ,#dropdown-option-label,#recommendation-label,#dropdown-feature-label,#improvement-label,#comment-label{
font-family: verdana;
font-size: 18px;
}
.input-head ,#dropdown-option-select,#dropdown-feature-select{
margin-top: 10px;
border-radius: 5px;
height: 35px;
font-size: 16px;
}
#recommendation {
display:flex;
height:120px;
}
#para-definitely,#para-maybe,#para-not-sure {
font-size: 18px;
margin-top:2px;
margin-bottom: 10px;
}
#improvement {
display:flex;
flex-direction: column;
margin-left:7%;
margin-right:7%;
}
.para-improvement {
margin-top:-15px;
margin-bottom:15px;
}
#comment {
margin-left:7%;
margin-right:7%;
display:grid;
}
#textaera {
height: 100px;
background-color: black;
}
#input-textaera {
height:100px;
width:50%;
}
#input-textaera::placeholder {
position:relative;
bottom: 37%;
left:2%;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36.
Challenge: Build a Survey Form
Link to the challenge: