uni-app中nvue的input输入框自动填充有黄色背景 希望去掉

uni-app中nvue的input输入框自动填充有黄色背景 希望去掉

开发环境 版本号 项目创建方式
Mac 12.1 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.3.5

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：meta30pro

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

nvue的input输入框自动填充有黄色背景，希望能去掉


操作步骤：

nvue的input输入框自动填充有黄色背景，希望能去掉


预期结果：

nvue的input输入框自动填充有黄色背景，希望能去掉


实际结果：

nvue的input输入框自动填充有黄色背景，希望能去掉


bug描述：

nvue的input输入框自动填充有黄色背景，希望能去掉


更多关于uni-app中nvue的input输入框自动填充有黄色背景 希望去掉的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

提供可以复现的代码，方便调试

更多关于uni-app中nvue的input输入框自动填充有黄色背景 希望去掉的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是WebKit内核浏览器（包括Android WebView）对自动填充表单的默认样式。在nvue中可以通过以下方式解决：

方法1：使用CSS样式覆盖（推荐）

/* 全局样式或页面样式 */
input {
  -webkit-autofill: none !important;
  background-color: transparent !important;
}

/* 或者更精确的选择器 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

方法2：在input组件上直接设置样式

<template>
  <input 
    type="text" 
    style="-webkit-autofill: none; background-color: transparent;"
  />
</template>

方法3：禁用自动填充（如果不需要）

<template>
  <input 
    type="text" 
    autocomplete="off"
  />
</template>

方法4：使用内联样式覆盖

<template>
  <input 
    type="text" 
    :style="{
      '-webkit-autofill': 'none',
      'background-color': 'transparent'
    }"
  />
</template>
回到顶部