如何让Quasar QInput/QSelect占位标签固定在框内顶部（无内容时）

要实现无内容时标签固定在输入框/选择框内部顶部（类似你提到的"Display Name"字段样式），可以通过以下两种方法实现：

方法一：使用Quasar内置属性（推荐） #

利用组件的label-position="inside"和label-always-float属性，强制标签始终保持浮动在内部顶部状态，不会随内容清空回到底部。

QInput示例 #

<q-input
  label="Display Name"
  label-position="inside"
  label-always-float
  v-model="displayName"
/>

QSelect示例 #

<q-select
  label="Display Name"
  label-position="inside"
  label-always-float
  v-model="selectedValue"
  :options="['选项1', '选项2', '选项3']"
/>

注意：如果使用Quasar v1版本，label-always-float需要替换为float-label="always"。

方法二：自定义CSS强制定位 #

如果内置属性无法满足需求，可以通过自定义CSS强制固定标签位置：

组件代码 #

<q-input
  label="Display Name"
  class="fixed-inside-label"
  v-model="displayName"
/>

<q-select
  label="Display Name"
  class="fixed-inside-label"
  v-model="selectedValue"
  :options="['选项1', '选项2', '选项3']"
/>

样式代码 #

/* 全局或scoped样式 */
.fixed-inside-label .q-field__label {
  transform: translateY(-10px) scale(0.75) !important;
  top: 0 !important;
  pointer-events: none;
}

/* 确保聚焦/有内容时标签位置不变 */
.fixed-inside-label .q-field--focused .q-field__label,
.fixed-inside-label .q-field--dirty .q-field__label {
  transform: translateY(-10px) scale(0.75) !important;
  top: 0 !important;
}

以上两种方式都能让标签在无内容时固定在输入框内部顶部，避免用户误以为字段已填入内容。

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