vue3 如何设置input 自动填充样式

在 Vue3 中，要让输入框（`<input>`）自动获取浏览器的自动填充样式（如 macOS 的深色模式下高亮显示），你可以通过 HTML 和 CSS 来实现，同时利用现代浏览器的 `autofill` 和 `autocomplete` 属性。

1. 首先，在HTML部分，设置`<input>`元素的基本属性：

<input type="text" v-model="yourModel" :autocomplete="true">

这里的 `v-model` 是 Vue 的数据绑定，`yourModel` 是你要绑定的数据。`autocomplete="true"` 允许浏览器自动完成输入。

2. 然后，在 CSS 里，允许浏览器应用默认的自动填充样式，并清除掉可能覆盖其样式的其他内联样式：

/* 在你的全局样式表或组件样式中 */
input:-webkit-autofill {
  /* 清除浏览器自带的填充颜色和阴影等样式，保持一致 */
  background-color: transparent !important;
  box-shadow: none !important;
}

input:-webkit-autofill:focus {
  /* 自定义焦点效果，比如更亮的边框 */
  outline: 0 solid #ffcc4d;
  border-color: #ffcc4d;
}

这里 `-webkit-autofill` 和 `-webkit-autofill:focus` 是针对 WebKit 内核浏览器（如 Chrome、Safari）的，可以调整成其他浏览器的相应伪类（如 `:-moz-focusring`, `::-ms-clear` 等）以支持更多浏览器。