如何隐藏shadcn-vue Select组件的箭头？尝试isArrow属性无效

方法一：使用组件内置属性 #

shadcn-vue的SelectTrigger基于Radix Vue的组件，正确禁用箭头的属性是:arrow="false"，而非你尝试的isArrow='false'。修改后的代码如下：

<div class="relative w-full items-center border rounded-md">
  <div class="ps-10">
    <Select v-model="userInformation.user.gender">
      <SelectTrigger class="border-none focus:ring-0 focus:ring-offset-0" :arrow="false">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem v-for="item in gender" :key="item.id" :value="item.value">
            {{ item.name }}
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </div>
  <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
    <Icon size="24" class="text-muted-foreground" name="material-symbols:male-rounded" />
  </span>
</div>

方法二：CSS强制隐藏 #

如果属性方法不生效，可以通过CSS直接隐藏箭头元素：

全局样式（适用于所有Select组件）

[data-radix-select-trigger-arrow] {
  display: none !important;
}

组件内局部样式（仅当前组件生效）

若使用Vue的scoped样式，需要添加:deep()穿透：

<style scoped>
:deep([data-radix-select-trigger-arrow]) {
  display: none;
}
</style>

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