How do i change the color of my password input when browser completes the password automatically?

i'm making a signup page for my chat app and when my browser (firefox) detects that i already have an password for this website, it puts it in automatically in the password field and change its color like in the image: enter image description here

can i change this color? i'm using react.js, tailwindcss and lucide-react

this is what my code looks like:

            <div className="form-control">
              <label className="label">
                <span className="label-tex">Senha</span>
              </label>
              <div className="inputController">
                <div className="inputImg">
                  <Lock className ="img"></Lock>
                </div>
                <input 
                  type= {showPassword ? "text" : "password"} 
                  className='input input-bordered w-full pl-10 text-base-content/40'
                  placeholder='•••••••••••'
                  value={formData.password}
                  onChange={(e) => setFormData({ ...formData, password: e.target.value})}
                 />
                 <button
                  type='button'
                  className='showPassBtn'
                  onClick={() => setShowPassword(!showPassword)}>

                  {showPassword ? (<EyeOff className='img'/>
                  ) : (<Eye className='img'/>)}
                  
                 </button>
              </div>
            </div>

.inputController {
    position: relative;
}

.inputImg {
    position: absolute;
    padding-left: 12px;
    align-items: center;
    display: flex;
    left: 0px;
    inset-block: 0px;
}

.showPassBtn {
    position: absolute;
    display: flex;
    align-items: center;
    right: 0px;
    padding-right: 6px;
    inset-block: 0px;
}

.img {
    width: 20px;
    height: 20px;
    color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
}

i've tried everywhere to find any solution but i cant ask properly

You can use the autofill CSS pseudo-class to achieve this.

You can do:

.input:is(:-webkit-autofill, :autofill) {
  box-shadow: 0 0 0 30px white inset;
  -webkit-box-shadow: 0 0 0 30px white inset;
}

to change the background color of your input to white. Keep in mind that you can't use background-color property, because many browsers block it, so you have to use box-shadow instead.

Here is the documentation.