Quasar Framework中QInput自动填充背景色不一致问题求助

这个差异是浏览器对自动填充输入框的默认样式导致的，和Quasar组件本身无关，通过以下CSS样式覆盖即可解决：

方案1：组件内局部覆盖（Vue单文件组件） #

在使用QInput的组件<style>标签中添加深度作用域样式，穿透Quasar组件封装：

::v-deep .q-input input:-webkit-autofill,
::v-deep .q-input input:-webkit-autofill:hover,
::v-deep .q-input input:-webkit-autofill:focus {
  /* 设置为你手动输入时的背景色，示例为白色 */
  background-color: #ffffff !important;
  /* 匹配输入框文本颜色 */
  color: #333 !important;
  /* 阻止浏览器重置背景色的默认行为 */
  transition: background-color 5000s ease-in-out 0s;
  /* 若存在默认阴影，一并覆盖 */
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
}

注：如果使用Vue 2，可将::v-deep替换为/deep/

方案2：全局样式覆盖（全项目生效） #

在项目全局样式文件（如src/css/app.scss）中添加以下代码，所有QInput都会生效：

.q-input input:-webkit-autofill,
.q-input input:-webkit-autofill:hover,
.q-input input:-webkit-autofill:focus {
  background-color: #ffffff !important;
  color: #333 !important;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
}

只需把代码中的#ffffff和#333替换为你项目中手动输入时输入框的背景色和文本色即可。

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