CODEWITHSUNDEEP
htmlcssreactjsinputpasswords
Luís Ulian
Luís Ulian

Reputation: 23

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

Upvotes: 1

Views: 74

Answers (1)

Yaniek
Yaniek

Reputation: 82

You can use the autofill CSS pseudo-class to change the background color of your input when the browser completes it automatically.

CSS:

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

Explanation of the code: We add the -webkit-autofill or autofill pseudo-class depending on the browser engine to our input element with the class of .input. Then we set the box-shadow with no h-offset(first property), no v-offset(second property), no blur(third property), 30px of spread radius(fourth property), white color of the shadow(fifth property) and changing the shadow to inner shadow(sixth property).

Warning: You can't use background-color property, because many browsers block it, so you have to use box-shadow instead.

Here are more examples of the implementation of this functionality.

Upvotes: 1

Related Questions