[CSS]input 입력 필드가 자동완성될 때의 스타일을 정의

자동완성 입력예시

 

입력 필드 자동완성이 안나오게 하는 방법과 해당 요소에 스타일 정의하는 방법과 설명입니다.

 

자동완성 기능을 해제하는 방법

<input id='name' autocomplete='off'/>

 

autocomplete='off' 를 넣게 되면, 자동완성 기능이 해제되며, 삭제하면 기본 활성화 됩니다.

 

반응형

 

자동완성 기능 스타일 정의

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active { 
    transition: background-color 1000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0 30px inset transparent;
    -webkit-text-fill-color: #000;
    caret-color: #000;
}

 

선택자 설명

• input:-webkit-autofill: 자동완성된 입력 필드를 선택합니다.
• input:-webkit-autofill:hover: 마우스를 올렸을 때 자동완성된 입력 필드를 선택합니다.
• input:-webkit-autofill:focus: 포커스된 자동완성된 입력 필드를 선택합니다.
• input:-webkit-autofill:active: 활성화된 자동완성된 입력 필드를 선택합니다.

이 선택자들은 자동완성된 입력 필드의 다양한 상태를 선택하여 동일한 스타일을 적용합니다.

스타일 설명

1. transition: background-color 1000s ease-in-out 0s;
   • 설명: 배경색이 1000초 동안 천천히 변하도록 설정합니다.
   • 의미: ease-in-out은 변환의 속도를 천천히 시작하고 천천히 끝나도록 합니다. 0s는 지연 시간이 없음을 의미하며, 변환이 즉시 시작됨을 나타냅니다.
2. -webkit-box-shadow: 0 0 0 30px inset rgba(255, 255, 255, 0);
   • 설명: 내부에 투명한 그림자를 설정합니다.
   • 의미: rgba(255, 255, 255, 0)는 완전히 투명한 흰색을 의미합니다. 0 0 0 30px은 그림자의 크기와 위치를 정의하며, inset은 그림자가 내부로 적용됨을 의미합니다.
3. -webkit-text-fill-color: #000;
   • 설명: 자동완성된 텍스트의 색상을 검은색으로 설정합니다.
   • 의미: 자동완성된 입력 필드의 텍스트 색상이 검은색으로 표시됩니다.
4. caret-color: #000;
   • 설명: 입력 필드의 커서 색상을 검은색으로 설정합니다.
   • 의미: 입력 필드의 텍스트 커서가 검은색으로 표시됩니다.
5. background-color: transparent !important;
   • 설명: 배경색을 투명하게 설정합니다.
   • 의미: !important를 사용하여 이 스타일이 다른 어떤 스타일보다 우선되도록 합니다. 이는 자동완성된 입력 필드의 배경색을 투명하게 만듭니다.

요약

이 코드는 자동완성된 입력 필드의 배경색을 투명하게 하고, 텍스트와 커서 색상을 검은색으로 설정하여 사용자가 입력할 때 자동완성된 스타일을 숨기는 효과를 줍니다. transition 속성은 배경색 변환을 매우 천천히 적용하도록 설정되어 있지만, 실제로는 background-color: transparent !important;로 인해 즉시 투명하게 됩니다. -webkit-box-shadow는 투명한 그림자를 적용하여 기본 자동완성 스타일을 덮어쓰는 데 사용됩니다.

 

다크모드가 있는 경우는 아래처럼 응용할 수 있겠네요.

다크모드 일때 스타일 정의

[color-theme='dark'] input:-webkit-autofill,
[color-theme='dark'] input:-webkit-autofill:hover,
[color-theme='dark'] input:-webkit-autofill:focus,
[color-theme='dark'] input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--defaultText);
	caret-color: var(--defaultText);
}

 

예시로 색상을 변수로 했지만, 원하시는 색상코드를 넣으시면 됩니다.