同组input与select元素尺寸不一致的CSS调试问题

我在调整表单输入字段的尺寸时遇到了问题：第一个fieldset中的input和select设置了相同的CSS样式，但select显示得比input短。

相关HTML代码 #

<fieldset>
    <!-- Name-->
    <label id="name-label">Name<input type="text" id="name" placeholder="Enter your name" required/>
    <!-- Email-->
    <label id="email-label">Email<input type="email" id="email" placeholder="Enter your email" required/>
    <!-- Age-->
    <label id="number-label">Age<input type="number" id="number" placeholder="Enter your age" min="10" max="99" required/>
    <!-- Select form-->
    <label id="role">
      Which option best describes your current role?
      <select id="dropdown" name="survey-form">
        <option value="">Select current role</option>
        <option value="1">Student</option>
        <option value="2">Full time job</option>
        <option value="3">Full time learner</option>
        <option value="4">Prefer not to say</option>
        <option value="5">Other</option>
      </select>
    </label>
</fieldset>

当前使用的CSS代码 #

fieldset:first-of-type input,select{
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2em;
    border-radius: 5px;
    border: 2px solid rgb(218, 218, 218);
}

问题原因 #

浏览器默认对select和input元素的盒模型处理存在差异：select自带默认内边距，且未启用border-box盒模型，导致设置width: 100%时，元素总宽度会叠加边框和内边距，超出容器范围，视觉上比input更窄。

解决方案 #

给目标元素添加box-sizing: border-box，让宽度计算包含边框和内边距，同时可统一设置内边距优化视觉一致性：

fieldset:first-of-type input,
fieldset:first-of-type select {
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2em;
    padding: 0 8px; /* 统一内边距，让内容显示位置更协调 */
    border-radius: 5px;
    border: 2px solid rgb(218, 218, 218);
    box-sizing: border-box; /* 关键：确保宽度包含边框和内边距 */
}

设置后，input和select的宽度会完全一致，内边距的统一也让表单视觉风格更规整。

内容的提问来源于stack exchange，提问作者Gurpreet Singh