Changing the size of `select` and `textarea` elements

Hello, I was trying to change the size of the select and textarea element to match the size of all the other input elements like text , email and number.

I’ve spent two hours trying to figure this out.

If you’ve got any solution please reply asap. Thankyou.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>freeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div>
      <h1 id="title">freeCodeCamp Survey Form</h1>
      <p class="description" id="description">We appreciate your participation in our industry. Please take the survey and leave a remark below to help with future improvements.</p>
    <form id="survey-form" method="post" action="https://register-demo.freecodecamp.org">
        <label id="name-label">Name<input id="name" type="text" required placeholder="Enter your name"></label>
        <label id="email-label">Email<input id="email" type="email" required placeholder="Enter your Email"></label>
        <label id="number-label">Age (optional)<input id="number" type="number" min="18" max="120" placeholder="Age"></label>
          <label for="dropdown">Which option best describes your current role?</label>
          <select id="dropdown">
            <option value="">Select current role</option>
            <option value="1">Student</option>
            <option value="2">Full Time Job</option>
            <option value="3">Full Time Learner</option>
            <option value="4">Prefer not to say</option>
            <option value="5">Other</option>
          </select>
        <label>Would you recommend freeCodeCamp to a friend?</label>
        <label id="definitely" class="inline"><input id="definitely" type="radio" value="definitely" name="definitely-maybe-notsure"> Definitely</label>
        <label id="maybe" class="inline"><input id="maybe" type="radio" value="maybe" name="definitely-maybe-notsure"> Maybe</label>
        <label id="not-sure" class="inline"><input id="not-sure" type="radio" value="not-sure" name="definitely-maybe-notsure"> Not sure</label>
        <label>What would you like to see improved? (Check all that apply)</label>
        <label id="front-end" class="inline"><input id="front-end" type="checkbox" value="front-end"> Front-end Projects</label>
        <label id="back-end" class="inline"><input id="back-end" type="checkbox" value="back-end"> Back-end Projects</label>
        <label id="Data Visualization" class="inline"><input id="data-visualization" type="checkbox" value="data-visualization"> Data Visualization</label>
        <label id="job-search" class="inline"><input id="job-search" type="checkbox" value="job-search"> Job Search</label>
        <label>Any comments or suggestions?</label>
        <textarea id="" placeholder="Enter your comment here..." rows="6" cols="50"></textarea>
        <input id="submit" type="submit" value="Submit">
    </form>
    </div>
  </body>
</html>
body {
  background-image: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGNvZGluZ3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60);
}

form {
  width: 80%;
  margin: 0 auto;
  background-color: rgba(0, 0, 13, 0.75);
  padding: 10px;
}

label, p {
  display: block;
  color: #ffffff;
  padding: 1em;
  font-size: 20px; 
}

h1 {
  text-align: center;
  color: #ffffff;
  padding: 0 100px;
  font-size: 35px;
  margin-bottom: -10px;
}

.description {
  font-style: italic;
  font-size: 20px;
  text-align: center;
  color: #ffffff;
  padding: 0 100px;
}

input[type="text"]
, input[type="email"]
, input[type="number"] {
  display: block;
  padding: 1px 10px;
  border-radius: 5px;
  height: 2rem;
  margin-top: 5px;
  width: 100%;
  font-size: 16px;
}

.inline {
  margin-top: -25px;
}

textarea
, select
, option {
  margin: 0;
  height: 2rem;
  width: 100%;
}

div {
  padding: 20px 0;
}

input[type="submit"] {
  display: block;
  background-color: skyblue;
  width: 90%;
  font-size: 20px;
  font-weight: bold;
  margin: 1em auto;
  height: 2.5em; 
}

Welcome to the community!

I believe this article may be able to help solve the issue you are facing with sizing them.

Happy coding! :slight_smile:

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