How to match HTML input and select styles with CSS

Question

I'm trying to match the styles of both HTML <input> and the <select> tags with all fonts and size in their borders but I can't seem to find a solution for this. I have tried using the same code I used for <input>, have a bigger width for the <select> tag, or even use a bigger padding for the element but I can't seem to make it work. What I have is this:

@import url('https://fonts.googleapis.com/css?family=Sulphur+Point&display=swap');
body {
  background-image: url(http://wallpapercave.com/wp/c2apnKi.jpg);
  font-family: 'Sulphur Point', sans-serif;
}

#main {}

#title {
  color: #FFF;
  text-align: center;
}

#description {
  color: #FFF;
  text-align: center;
}

#survey-form {
  padding: 15px;
  background-color: lightblue;
  width: 700px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

label {
  display: block;
  margin-left: 5.8em;
  margin-top: 1em;
}

#name {
  width: 70%;
  padding: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#email {
  display: block;
  width: 70%;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}

#number {
  display: block;
  width: 70%;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}

#dropdown {
  width: 70%;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  font-family: "Sulphur-Point", sans-serif;
  border: none;
}

<main>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the platform</p>
  <div>
    <form id="survey-form">
      <label for="name">Name</label><br>
      <input type="text" id="name" name="fname" placeholder="Enter your name">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="emailaddress" placeholder="Enter your email" required>
      <label for="age">Age (optional)</label><br>
      <input type="number" id="number" name="age" placeholder="Age" min="1" max="100">
      <label for="role">Which option best describes your current role?</label><br>
      <select id="dropdown">
        <option value "" disable selected hidden>Select current role</option>
        <option value="">Student</option>
        <option value="">Full Time Job</option>
    </form>
  </div>
</main>

Any ideas on how can I fix this?

Answer 1

First ensure that both your <input> and <select> have the same padding (I've set it to 10px in my example), and then simply add the box-sizing: content-box CSS rule. This changes how width is derived, and needs to be applied to #dropdown, though you would benefit from instead adding it to every element on your page with the wildcard selector *:

* {
  -ms-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

@import url('https://fonts.googleapis.com/css?family=Sulphur+Point&display=swap');
body {
  background-image: url(http://wallpapercave.com/wp/c2apnKi.jpg);
  font-family: 'Sulphur Point', sans-serif;
}

#main {}

#title {
  color: #FFF;
  text-align: center;
}

#description {
  color: #FFF;
  text-align: center;
}

#survey-form {
  padding: 15px;
  background-color: lightblue;
  width: 700px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

label {
  display: block;
  margin-left: 5.8em;
  margin-top: 1em;
}

#name {
  width: 70%;
  padding: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#email {
  display: block;
  width: 70%;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}

#number {
  display: block;
  width: 70%;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}

#dropdown {
  width: 70%;
  padding: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  font-family: "Sulphur-Point", sans-serif;
  border: none;
}

<main>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the platform</p>
  <div>
    <form id="survey-form">
      <label for="name">Name</label><br>
      <input type="text" id="name" name="fname" placeholder="Enter your name">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="emailaddress" placeholder="Enter your email" required>
      <label for="age">Age (optional)</label><br>
      <input type="number" id="number" name="age" placeholder="Age" min="1" max="100">
      <label for="role">Which option best describes your current role?</label><br>
      <select id="dropdown">
        <option value "" disable selected hidden>Select current role</option>
        <option value="">Student</option>
        <option value="">Full Time Job</option>
    </form>
  </div>
</main>