[CSS] 크롬 input 노란색 배경 원하는 색상으로 변경하기
로그인창을 이쁘게 만들고 싶은 욕심에 border 곡선에 배경을 반투명으로 하고자 시도 하였다 그런데 크롬기능중 자동입력 기능
일때 배경색이 크롬 기본설정(user agent stylesheet)에 의하여 위의 이미지 처럼 노랑색으로 지정되는것을 알 수 있다. 이럴
경우 사용 할 수 있는 방법은 아래와 같다.
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 1000s ease-in-out 0s; /* input 배경색상 지우기 } |
어떻게 보면 버그를 이용한 방법이라 볼수 있다.
배경색상이 크롬의 user agent stylesheet에 의하여 색상이 지정되는데 처음 설정한 배경색상에서 transition을 이용하여
background-color을 1000초를 거쳐 색상을 바꾸는 설정 값이다.
그렇기때문에 위에 설정한 1000s 시간이 지나면 user agent stylesheet설정에 의해 배경색상이 노랑색으로 변경되는것을 알 수 있다.
Comments