[css] Autocompleted css(autofill)

input type="text" 에 css 를 적용해놓고 싶은데 이게 autoComplete 기능을 켜놓으면

브라우저별로 css를 덮어씌워 버리게 된다

그러면 autoComplete 시에도 커스텀된 css 를 이용하고 자 할때는 어떻게 해야 하는가 하는 내용이다.

 

브라우저에서 수도클래스 형태로 css 가 되어 있는데 그부분을 변경 시켜주면된다.

 

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: all 5000s
}

// 모든변화를 5000초 지연시킴으로서 이전의 css유지 된는 거처럼 보이게 해준다.

chrome 에서는 이런식으로 css 하면 커스텀된 css로 보여진다.

그러나 firefox 에서는 원하는대로 되지않고 노란배경으로 뜬다 ㅠ(이유는 모른다. . 뭐 브라우저별로 받아들이는 순서의 차이지 싶다.)

firefox/chrome 위코드 적용이후 자동완성시

위의 파랑영역이 내가 커스텀한 부분이다ㅏ.

아예 지정안했을때 자동완성시 fire/chrome

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 500px ${COBALT_BLUE_4} inset;
}

// input 영역 안을 쉐도우로 대체하는 css 이다. 이전의 방식이 지연을 통한 트릭이라면 이거는 배경을 쉐도우로 대체하는 식이다

이렇게 지정하면 내가 원하는 백그라운드로 보인다.

fire/chrome