[CSS] webkit 브라우저 input 텍스트 필드의 색상 변경하기

크롬, 사파리 등에서 텍스트필드의 글자색이 회색으로 나타날 때...

브라우저별로 input 텍스트필드에 대한 에이전트 스타일은 상이합니다. 사파리, 크롬에서 원하는 색상으로 텍스트 색상을 설정하려면 별도의 속성 정의가 필요합니다(특히 #000, #FFF 등의 색으로 변경할 때 조금 회색빛이 도는 이슈를 방지할 필요가 있을 때). 이런 상황은 iOS 및 Safari 또한 스타일 강제성이 다소 높은 편입니다. 특히 Disabled 속성이 부여된 input 요소에 대한 강제성이 강한 편인데, 기본적으로 40%의 투명도를 갖는 회색으로 표현이 됩니다. 이를 수정하기 위해서는 별도 Webkit 브라우저(Safari, Chrome, Edge)용 속성을 사용하고, opaicty를 함께 부여해 주어야 합니다. 하기 코드를 참고하여 Webkit 브라우저용 개발 시 관련 내용을 참고하시기 바랍니다.

 

input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  color: currentcolor;
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}

 

참고자료

• Disabled input text color on iOS

Disabled input text color on iOS