[selector] CSS - :autofill 가상선택자 - 브라우저 자동완성 채우기로 입력된 요소 선택 (= :autofill선택자 = 오토필선택자)

1. :autofill 예제 - 브라우저 자동완성 채우기로 입력된 요소 선택
2. :autofill 정의
3. :autofill 구문

:autofill 예제 - 브라우저 자동완성 채우기로 입력된 요소 선택

 

<style>

input:autofill {

  border: 2px solid red;

}

</style>

<form>

<label for="name">이름: </label><br>

<input id="name" name="name" type="text" autocomplete="name" /><br>

<label for="email">이메일: </label><br>

<input id="email" name="email" type="email" autocomplete="email" /><br>

<label for="home-address">주소:</label><br>

<input name="address" type="text" autocomplete="street-address"><br>

<label for="country">국적: </label><br>

<input id="country" name="country" type="text" autocomplete="country-name" />

</form>

 

결과보기

:autofill 정의

 

autocomplete 속성 가진 <input> 요소를 브라우저 자동완성 채우기로 입력시 해당 INPUT 요소를 선택하는 선택자.

 

---

PS.

• 주의: 자동완성 채우기로 채운 값을 사용자가 수정하면 더 이상 이 선택자의 영향을 받지 않음.
• CSS2
• IE 제외한 주요 최신 브라우저 모두 지원.

 

:autofill 구문

 

:autofill { CSS 선언 }