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 — Obsidian Age
– Obsidian Age, Commented Dec 9, 2019 at 22:01
Set box-sizing:content-box and use the same padding (10px). — Obsidian Age
– Obsidian Age, Commented Dec 9, 2019 at 22:02
also tried that but can't seem to make any changes using the box-sizing: content-box property. @ObsidianAge — sati_space
– sati_space, Commented Dec 9, 2019 at 22:07

Obsidian Age · Accepted Answer · 2019-12-09 22:10:18Z

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>

answered Dec 9, 2019 at 22:10

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sati_space Over a year ago

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

Obsidian Age Over a year ago

It will be a 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.

sati_space Over a year ago

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

Collectives™ on Stack Overflow

How to match HTML input and select styles with CSS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related