ตรวจสอบ webkit-input-placeholder ด้วยเครื่องมือสำหรับนักพัฒนา

เป็นไปได้ที่จะจัดรูปแบบตัวยึดข้อความของตัวป้อนข้อมูลด้วยวิธีต่อไปนี้:

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

ฉันกำลังดูเว็บไซต์ออนไลน์และฉันต้องการใช้สีตัวยึดตำแหน่งเดียวกับที่ทำ เป็นไปได้ไหมที่จะใช้สีอะไร? ฉันต้องการรวมค่าอัลฟาใด ๆ ดังนั้นฉันจึงไม่สามารถลองสีด้วยเครื่องมือแก้ไขภาพได้

เมื่อฉันตรวจสอบองค์ประกอบด้วย Chrome Dev Tools ฉันเห็น:

เครื่องมือ Dev ไม่ได้ให้ข้อมูลเกี่ยวกับองค์ประกอบตัวแทนเมื่อทำการตรวจสอบองค์ประกอบอินพุต มีวิธีอื่นอีกไหม?

ฉันคิดออก

เคล็ดลับคือการเปิดใช้งาน 'แสดงเงาตัวแทนผู้ใช้ DOM' ในแผงการตั้งค่าของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome:

หากต้องการไปที่การตั้งค่าให้คลิกปุ่ม "⋮" ที่ด้านบนขวาของแผงเครื่องมือ Dev ของคุณจากนั้นคลิกการตั้งค่าและอยู่ภายใต้แท็บการตั้งค่าเริ่มต้น

ด้วยสิ่งนี้คุณสามารถดูได้:

1. สำหรับ Google Chrome เวอร์ชั่น 69:
2. เปิดองค์ประกอบตรวจสอบ: บน Mac Shift + Shift + C บน Windows / Linux Ctrl + Shift + C หรือ F12
3. คลิกปุ่ม "⋮" ที่ด้านบนขวาจากนั้นไปที่การตั้งค่า
4. ในการตั้งค่าคลิกที่การตั้งค่า> คลิกที่แสดงตัวแทนผู้ใช้เงา DOM

ภาพด้านล่างแสดงกระบวนการ:

ไปที่การตั้งค่า> การตั้งค่า:

คลิกที่แสดงตัวแทนผู้ใช้เงา DOM:

ดู CSS ของตัวยึดตำแหน่ง: