Kiểm tra webkit-input-placeholder bằng các công cụ dành cho nhà phát triển

225

Có thể định kiểu giữ chỗ của kiểu nhập văn bản bằng cách sau:

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

Tôi đang xem một trang web trực tuyến và tôi muốn sử dụng màu giữ chỗ giống như họ làm. Có thể tìm ra màu sắc họ đã sử dụng? Tôi muốn bao gồm bất kỳ giá trị alpha nào, vì vậy tôi không thể lấy mẫu màu bằng trình chỉnh sửa hình ảnh.

Khi tôi kiểm tra phần tử bằng Chrome Dev Tools, tôi thấy:

nhập mô tả hình ảnh ở đây

Các công cụ dev không cung cấp thông tin liên quan đến phần tử giữ chỗ khi kiểm tra phần tử đầu vào. Có cách nào khác không?

html css

— Sean Anderson
nguồn

có thể trùng lặp Làm thế nào để thay đổi màu giữ chỗ trên tiêu điểm?

— cport1

Không ... Tôi nói rõ trong câu hỏi rằng tôi biết cách thay đổi nó, nhưng tôi tự hỏi làm thế nào để kiểm tra tài sản của người khác. Tôi thậm chí cung cấp một mẫu mã cho thấy tôi biết cách thay đổi nó.

— Sean Anderson

trang web gì Vì giữ chỗ là một phần tử giả, bạn vẫn có thể thấy các kiểu khi kiểm tra phần tử đó.

— cport1

Câu trả lời:

457

Tôi đã hiểu rồi.

Mẹo nhỏ là bật 'Hiển thị bóng của tác nhân người dùng DOM' trong bảng Cài đặt của Công cụ dành cho nhà phát triển Chrome:

nhập mô tả hình ảnh ở đây

Để nhận cài đặt, nhấp vào nút "" ở trên cùng bên phải của bảng Dev Tools, sau đó nhấp vào Cài đặt và dưới tab Tùy chọn mặc định.

Với điều đó, bây giờ bạn có thể thấy nó:

nhập mô tả hình ảnh ở đây

— Sean Anderson
nguồn

Các thiết lập là có trong 62 và nó hoạt động rất đẹp.

— isherwood

Chrome 67 và giải pháp của bạn cũng được áp dụng

— gefrag

@gefrag Tôi cũng sử dụng Chrome 67, nhưng không thể tìm thấy tùy chọn này. Bạn có thể xin vui lòng trong tab mà nó được đặt bây giờ?

— Cá chép Ben

Bất cứ ai cũng biết làm thế nào để xem ::placeholderphần tử giả được hỗ trợ rộng rãi bây giờ?

— swrobel

@swrobel quy trình làm việc được đề cập trong câu trả lời này cho phép bạn kiểm tra ::placeholder. Xem câu trả lời liên quan này .

— Kayce Basques

Đối với Google Chrome Phiên bản 69:
Các yếu tố kiểm tra mở: Trên Mac + Shift + C, trên Windows / Linux Ctrl + Shift + C HOẶC F12.
Nhấp vào nút "" ở trên cùng bên phải, sau đó chuyển đến cài đặt
Trong cài đặt, nhấp vào Tùy chọn> Nhấp vào Hiển thị tác nhân người dùng Shadow DOM

Các hình ảnh dưới đây cho thấy quá trình:

Chuyển đến cài đặt> Tùy chọn:

Nhấp vào Hiển thị tác nhân người dùng Shadow DOM:

Xem CSS của trình giữ chỗ:

— Jay Supeda
nguồn