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


225

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

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

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

Chrome 개발자 도구로 요소를 검사하면 다음이 표시됩니다.

여기에 이미지 설명을 입력하십시오

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



16
아니요. 나는 그것을 바꾸는 방법을 알고 있지만 다른 사람의 속성을 검사하는 방법을 궁금하게 생각합니다. 코드 변경 방법을 보여주는 코드 샘플도 제공합니다.
Sean Anderson

웹 사이트는 무엇입니까? 자리 표시자는 의사 요소이므로 해당 요소를 검사 할 때 스타일을 계속 볼 수 있어야합니다.
cport1

답변:


457

나는 그것을 알아.

요령은 Chrome 개발자 도구의 설정 패널에서 '사용자 에이전트 그림자 DOM 표시'를 활성화하는 것입니다.

여기에 이미지 설명을 입력하십시오

설정으로 이동하려면 개발자 도구 패널의 오른쪽 상단에있는 "⋮"버튼을 클릭 한 다음 설정을 클릭하십시오. 기본 환경 설정 탭 아래에 있습니다.

이를 통해 이제 볼 수 있습니다.

여기에 이미지 설명을 입력하십시오


5
설정은 62에 있으며 아름답게 작동합니다.
isherwood

Chrome 67 및 솔루션도 적용
gefrag

@gefrag Chrome 67도 사용하지만이 옵션을 찾을 수 없습니다. 현재 어느 탭에 위치합니까?
벤 잉어

누구든지 ::placeholder현재 널리 지원되는 의사 요소 를 보는 방법을 알고 있습니까?
swrobel

2
@swrobel이 답변에 언급 된 워크 플로를 통해 검사 할 수 있습니다 ::placeholder. 이 관련 답변을 참조하십시오 .
Kayce Basques

31
  1. Chrome 버전 69의 경우 :
  2. 검사 요소 열기 : Mac ⌘ + Shift + C, Windows / Linux Ctrl + Shift + C 또는 F12.
  3. 오른쪽 상단의 "⋮"버튼을 클릭 한 다음 설정으로 이동
  4. 설정에서 환경 설정을 클릭하고 사용자 에이전트 Shadow DOM 표시를 클릭하십시오.

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

설정> 환경 설정으로 이동하십시오.
설정> 환경 설정으로 이동

사용자 에이전트 Shadow DOM 표시를 클릭하십시오.
여기에 이미지 설명을 입력하십시오

자리 표시 자의 CSS를 봅니다.
여기에 이미지 설명을 입력하십시오

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.