Input 자동완성 적용되었을때 background-color, border-radius 바뀌는 이슈

Input 자동완성 적용되었을때 background-color, border-radius 바뀌는 이슈

위의 자동완성 기능을 이용하면 아래와 같이 스타일이 확 바껴버린다.

 

background-color대신 box-shadow 이용

background가 먹지 않아서 검색해보니 box-shadow를 이용해야 했다.

검정색으로 바꿀것이기에 아래와 같이 적용.

input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0px 1000px #000 inset;
  border: 1px solid #000;
}

input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0px 1000px #000 inset;
  border: 1px solid #000;
}

 

border-radius쪽 실선

그랬더니 border-radius쪽에 실선이 남아있다.

 

다음과 같이 background-clip 추가하니 해결

    input:-webkit-autofill {
      -webkit-text-fill-color: #fff !important;
      box-shadow: 0 0 0px 1000px #000 inset !important;
      border: 1px solid #000 !important;
      background-clip: content-box !important;

    }

    input:-webkit-autofill:focus {
      -webkit-text-fill-color: #fff !important;
      box-shadow: 0 0 0px 1000px #000 inset !important;
      border: 1px solid #000 !important;
      background-clip: content-box !important;
    }

 

해결된 모습

--

참고자료

 

https://stackoverflow.com/questions/70025166/input-autofill-background-color-with-border-radius