How to match HTML input and select styles with CSS - html

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>