html - 如何使用 CSS 匹配 HTML 输入和选择样式

Question

我试图匹配两个 HTML 的样式 <input>和 <select>带有所有字体和大小的标签，但我似乎找不到解决方案。我尝试使用与 <input> 相同的代码, <select> 的宽度更大标签，甚至为元素使用更大的填充，但我似乎无法使其工作。我所拥有的是:

@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>

关于如何解决这个问题有什么想法吗？

Answer 1

首先确保您的 <input>和 <select>有相同的padding (在我的示例中，我将其设置为 10px)，然后只需添加 box-sizing: content-box CSS 规则。这改变了 width 的方式是派生出来的，需要应用到#dropdown ，尽管使用通配符选择器 * 将其添加到页面上的每个元素会有所帮助。 :

* {
  -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>