[쉘위헬스] input 자동완성 시 배경색 변경(input:-autofill)

로그인 모달창에서 자동완성으로 채워지는 경우 뒷 배경이 블럭모양으로 처리가 되었다
처음에는 Input css에 background-imega 로 이미지를 채워놓았었기에
자동완성시에 이미지가 적용되는 방법을 찾아보았다.

input 자동완성 시 CSS코드를 통해서 배경색은 지정이 가능했는데
이미지 지정은 애니메이션인 키프레임으로 설정해줘야했었다.
key frames 으로 시도 해봤으나 잘 적용되지 않았고 그러던 중

그러던 중 오버스택플로우에서
텍스트 상자에 배경 이미지를 사용하는 것은 매우 불편한 습관입니다. HTML 마크업을 변경할 수 있습니다.

라는 글을 보았고 인풋에 적용되어있던 이미지 css를 div태그를 추가하여 옮기는 방향으로 수정하였다.

<input className="input-email" name="email" onChange={valueChange} placeholder='Email' onKeyPress={EnterLogin} />

//변경

<div className="input-back">
  <input className="input-email" name="email" onChange={valueChange} placeholder='Email' onKeyPress={EnterLogin} />
</div>

자동완성 CSS 코드 수정

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--main-backcolor3) inset !important;
  -webkit-text-fill-color: var(--font-color2) !important;
}

---

위 내용을 검색하다가 input 자체기능에서 자동완성을 막아주는 옵션도 찾아볼 수 있었다

input 자동완성 막게하는 기능

autoComplete = 'off'

<input className="input-email" autoComplete="off" name="email" onChange={valueChange} placeholder='Email' onKeyPress={EnterLogin} />

---

참고자료

https://www.codegrepper.com/code-examples/html/css+background+autofill
https://stackoverflow.com/questions/21402368/google-chrome-autofill-removing-background-image