mobile safari input text 색상 설정

safari만 그런지 모르겠는데 input text 하단에 shadow 컨텐츠(사용자 에이전트) 라는 요상한? element가 생기고 거기에 텍스트가 입력되어 css color가 먹지 않는 경우가 있다.

 

이럴때 해당 input에 다음 스타일을 적용해주면 input text에 색상값을 적용할 수 있다.

 

-webkit-text-fill-color: 헥사/rgba 컬러값

 

shadow 컨텐츠 생성이 사파리에서 인풋 텍스트 선택/부가 기능을 위해 브라우저 자체에서 생성하는 dom인거 같은데... 사파리는 이렇게 짜잘하게 귀찬게 구는게 많다 ㅡㅡ

 

*참고 url : javascript - How to change Safari autofill yellow background color - Stack Overflow