如何修改PrimeVue中Password组件的宽度？CSS尝试无效求助

你遇到的问题大概率是CSS选择器优先级不足、选择器写法有误，或是Vue组件的样式作用域限制导致的。针对你的情况，给你几个可行的解决办法：

1. 修正选择器并提升优先级 #

你的第二个选择器写法有误，.has()不是正确的CSS类选择器语法。如果是针对带密码切换图标的Password组件，正确的选择器应该是：

.p-password.p-password-toggle .p-password-input {
  width: 100%;
}

如果是普通Password组件，可通过添加父容器类提升优先级（假设父容器类为form-item）：

.form-item .p-password-input {
  width: 100%;
}

2. 处理Vue的scoped样式 #

如果在Vue单文件组件中使用了scoped属性，普通CSS选择器无法穿透到PrimeVue组件内部，需要使用深度选择器：

/* Vue 2 写法 */
::v-deep .p-password-input {
  width: 100%;
}

/* Vue 3 写法 */
:deep(.p-password-input) {
  width: 100%;
}

3. 应急方案：使用!important（不推荐长期使用） #

若以上方法均不生效，可临时用!important强制覆盖默认样式，但注意这可能影响其他组件样式：

.p-password-input {
  width: 100% !important;
}

建议打开浏览器开发者工具（F12）查看Password组件的实际DOM结构，确认输入框及父容器的类名，能更精准地编写选择器。

内容的提问来源于stack exchange，提问作者RODOY Vhal Christian