개발자 도구를 사용하여 웹킷 입력 자리 표시자 검사

개발자 도구를 사용하여 웹킷 입력 자리 표시자 검사

텍스트 입력의 자리 표시자에 다음과 같은 스타일을 지정할 수 있습니다.

-webkit-input-placeholder {
    color: red;
}

온라인 사이트를 보고 있는데 자리 표시자 색상을 그들과 동일하게 사용하고 싶습니다.그들이 어떤 색을 사용했는지 알아내는 것이 가능합니까?알파 값을 포함하고 싶기 때문에 이미지 편집기로 색상을 샘플링할 수 없습니다.

Chrome Dev Tools로 요소를 검사하면 다음과 같이 표시됩니다.

개발 도구는 입력 요소를 검사할 때 자리 표시자 요소에 대한 정보를 제공하지 않습니다.다른 방법이 없나요?

난 이해했다.

이 방법은 Chrome Developer Tools의 Settings 패널에서 'Show user agent shadow DOM'을 활성화하는 것입니다.

설정으로 이동하려면 Dev Tools 패널 오른쪽 상단에 있는 Gear 아이콘을 클릭한 다음 왼쪽의 Preferences 탭이 선택되어 있는지 확인하고 Elements 제목을 찾은 다음 해당 제목 아래의 "Show user agent shadow DOM" 확인란을 선택합니다.

이제 다음과 같이 확인할 수 있습니다.

1. Google Chrome 버전 69의 경우:
2. 검사 요소 열기:Mac ⌘ + Shift + C의 경우 Windows / Linux Ctrl + Shift + COR F12.
3. 오른쪽 상단의 "설정" 단추를 클릭한 다음 설정으로 이동
4. 설정에서 Preferences > Show user agent Shadow DOM 클릭

아래 이미지는 프로세스를 보여줍니다.

설정 > 환경설정으로 이동합니다.

Show user agent Shadow DOM:을 클릭합니다.

자리 표시자의 CSS 보기:

언급URL : https://stackoverflow.com/questions/26852922/inspect-webkit-input-placeholder-with-developer-tools