解决a-input密码回填白色背景问题

解决之前

image

解决之后

image

核心代码

				<a-form-item name="username" style="margin-bottom: 36px;">
					<div class="input-name">
						<a-input
							class="inputName"
							v-model:value="formData.username"
							autocomplete="off"
							style="background: transparent"
						>
							<template v-slot:prefix>
								<div class="input-box">
<!--									<span class="label-name">用户名</span>-->
									<span class="label-name"></span>
								</div>
							</template>
						</a-input>
					</div>
				</a-form-item>
				<a-form-item name="password">
					<div class="input-pwd">
						<a-input
							type="password"
							class="inputPwd"
							v-model:value="formData.password"
							style="background: transparent"
							autocomplete="new-password"
						>
							<template v-slot:prefix>
								<div class="input-box">
<!--									<span class="label-pwd">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>-->
									<span class="label-pwd"></span>
								</div>
							</template>
						</a-input>
					</div>
				</a-form-item>


<style>
.inputPwd input {
	background: transparent !important;
	box-shadow: none !important;
	border: none; /* 如果想要无边框 */
}

input:-webkit-autofill {
	transition: background-color 5000s ease-in-out 0s;
	-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
	-webkit-text-fill-color: #fff !important;
}

.input-box, .input-pwd {
	display: flex;
	align-items: center;

	.label-name {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 16px;
		line-height: 26px;
		letter-spacing: 0px;
		vertical-align: middle;
		position: relative;
		margin-left: 38px;
		top: 5px;
		color: rgba(255, 255, 255, 1);

	}
	.label-pwd {
		position: relative;
		margin-left: 38px;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 16px;
		line-height: 26px;
		letter-spacing: 0px;
		vertical-align: middle;
		color: rgba(255, 255, 255, 1);
	}
}
</style>
posted @ 2025-07-10 11:57  Felix_Openmind  阅读(30)  评论(0)    收藏  举报
*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}