Styling Quasar q-select：修改边框、文本及下拉图标颜色求助

问题根源 #

带scoped的样式会被Vue添加唯一属性前缀，无法穿透Quasar组件的内部DOM结构，必须用深度选择器才能覆盖组件默认样式。

可行样式代码 #

根据你的需求，在作用域<style scoped>中添加以下代码（Vue3用:deep()，Vue2替换为::v-deep）：

/* 修改外边框颜色 */
:deep(.q-field--outlined .q-field__control:before) {
  border: 1.25px solid rgb(98 0 255 / 48%) !important;
  transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 修改输入框文本颜色 */
:deep(.q-field__native) {
  color: #333; /* 替换成你需要的颜色 */
}

/* 修改下拉图标颜色 */
:deep(.q-select__dropdown-icon) {
  color: #9800ff; /* 替换成你需要的颜色 */
}

注意事项 #

• 若!important可以去掉且样式生效，优先不用，仅在优先级不够时添加。
• 上述代码仅作用于输入框区域，不会影响下拉选项面板的样式，符合你的要求。

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