如何修改Quasar框架中q-select组件的高度？

你当前的问题是因为Quasar的q-select（尤其是带outline和dense属性的）有多层嵌套元素，仅修改.q-field__outlined的高度不足以覆盖组件内部的默认样式约束。试试下面的CSS代码，能精准把高度设为28px：

:deep(.selection) {
  /* 给整个组件容器设置高度基准 */
  height: 28px;
}

:deep(.selection .q-field__control) {
  font-size: 13px;
  width: 250px;
  /* 覆盖默认min-height限制，让高度可被控制 */
  min-height: 28px;
  /* 确保内部元素垂直居中 */
  align-items: center;
}

:deep(.selection .q-field__outlined) {
  height: 100%;
  /* 用border-box避免padding撑开高度 */
  box-sizing: border-box;
}

:deep(.selection .q-field__native-input) {
  /* 调整输入框内边距，适配28px高度 */
  padding-top: 0;
  padding-bottom: 0;
  /* 让文字垂直居中 */
  line-height: 28px;
}

:deep(.selection .q-field__append) {
  /* 调整下拉箭头容器高度，避免超出组件 */
  height: 100%;
  align-items: center;
}

关键说明： #

• 你启用了dense属性，它会给组件添加紧凑样式，如果自定义高度和dense的预设冲突，要么用上面的代码强制覆盖，要么去掉dense属性后微调内边距。
• box-sizing: border-box是核心，确保元素的padding和border不会额外撑开高度。
• 必须同步修改.q-field__control的min-height，因为Quasar默认给这个元素设置了最小高度限制，不修改的话自定义高度无法生效。
• 调整.q-field__native-input的内边距和行高，能保证选中文字在28px高度内垂直居中，同时下拉箭头容器也要对齐，避免出现错位。

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