如何让select下拉选择框元素撑满外层div容器？

直接调整盒模型约束、对齐组件样式即可，不需要改动原有设计的视觉参数：

• 调整父容器.input-field.month的内边距规则，保留和其他输入框一致的上下内边距，移除左右内边距，避免父级内边距阻挡子元素铺满：

.input-field.month {
  padding: 0.25rem 0;
}

• 给内部嵌套元素添加撑满规则，同时重置select原生默认样式，逐一对齐字体、间距、圆角、动效参数，和数字输入框样式保持完全统一：

.input-field.month .input-group {
  width: 100%;
}
.input-field.month .form-select {
  width: 100%;
  padding: 0 2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  color: #000000bb;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  /* 清除浏览器原生select默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 对齐原有渐变背景+内置下拉箭头 */
  background-image: linear-gradient( 90deg, #ffffffaa 0%, #ffffffee 50%, #ffffffaa 100% ), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000000bb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-size: 200%, 1em 1em;
  background-position: 0 0, right 0.75rem center;
  background-repeat: no-repeat;
  transition: 0.5s;
  box-shadow: 0 0.5rem 10px -3px #00000025;
}
/* 对齐原有hover背景动效 */
.input-field.month .form-select:hover {
  background-position: right, right 0.75rem center;
}
/* 清除select聚焦时的默认轮廓 */
.input-field.month .form-select:focus {
  outline: none;
  box-shadow: 0 0.5rem 10px -3px #00000025;
}

• 之前直接给select加padding出现样式不统一，本质是没有重置浏览器原生select的默认外观、字体、边距属性，上述代码已经把所有样式参数和现有输入框做了逐一对齐，最终视觉效果和数字输入框完全一致，select下拉框会完全铺满外层div容器。

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