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?

Does this answer your question? [How to get equal width of input and select fields](https://stackoverflow.com/questions/4073768/how-to-get-equal-width-of-input-and-select-fields) — Obsidian Age, Dec 09 '19 at 22:01
Set `box-sizing:content-box` and use the same `padding` (`10px`). — Obsidian Age, Dec 09 '19 at 22:02
also tried that but can't seem to make any changes using the box-sizing: content-box property. @ObsidianAge — sati_space, Dec 09 '19 at 22:07

score 1 · Accepted Answer · answered Dec 09 '19 at 22:10

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>

It seems that even though I am using the wildcard selector, the dropdown is not changing appearance. Could this be a Codepen related issue? @Obsidian Age — sati_space, Dec 09 '19 at 22:17
It will be a [*specificity*](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) issue, with something else setting `box-content` with higher specificity. The wildcard selector is essentially the least-specific selector. You can always increase specificity as needed by changing the target selector (as long as it remains valid). Try shifting it to something like `#dropdown` instead. Inspect your element in the F12 Debugger, and you'll find out exactly what the overriding selector is, and also exactly where it's being set. — Obsidian Age, Dec 09 '19 at 22:24
I found out that the changes were not applied on my Macbook. When I opened the pen on Windows, changes were reflected just as you responded. Might happen to someone also running MacOS, and as of right now, I haven't figure out how to fix it. Thanks @Obsidian Age — sati_space, Dec 10 '19 at 14:42

How to match HTML input and select styles with CSS

1 Answers1