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

解决之后

核心代码
<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">密 码</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>
学而不思则罔,思而不学则殆!

浙公网安备 33010602011771号