如何为必填状态的Quasar Select组件添加星号(*)标记

问题根源 #

Quasar的Select组件结构和Input组件不同，原生<select>元素与标签的层级关系导致你之前的选择器无法匹配，再加上Vue的样式隔离机制，需要调整样式穿透方式和选择器逻辑才能生效。

方案一：用:has伪类实现（现代浏览器支持） #

通过父容器检测原生select的必填且未选中状态，给标签添加星号：

:deep(.q-select) {
  &:has(.q-select__native[required]:invalid) .q-select__label:before {
    content: '* ';
    color: red;
  }
}

• 逻辑：当原生select标记为required且未选中任何值（:invalid状态）时，在标签前添加红色星号
• 注意：Vue 3使用:deep()做样式穿透，Vue 2需替换为/deep/或>>>

方案二：自定义属性兼容旧浏览器 #

如果需要兼容不支持:has的浏览器，可给Select组件绑定自定义属性：
模板代码：

<q-select required :data-required="true" ... />

样式代码：

:deep(.q-select[data-required="true"] .q-select__label:before) {
  content: '* ';
  color: red;
}

• 优势：无需依赖表单验证状态，只要组件标记为必填就显示星号，逻辑更简单

验证注意事项 #

• 确保组件已正确添加required属性
• 分别测试未选中、已选中状态下的星号显示效果
• 根据Vue版本调整样式穿透的语法

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