: trình giữ chỗ-hiển thị - Thủ thuật CSS

Anonim

Lớp :placeholder-showngiả tự chọn phần tử đầu vào khi văn bản trình giữ chỗ tồn tại trong đầu vào biểu mẫu. Hãy coi đó là một cách hay để phân biệt giữa các đầu vào hiện đang hiển thị văn bản giữ chỗ so với những đầu vào không hiển thị.

input:placeholder-shown ( border: 5px solid red; )

Ý tưởng đằng sau trình giữ chỗ

Dựa trên văn bản và đầu vào có thể có văn bản giữ chỗ. Đó là văn bản được hiển thị khi đầu vào trống, để đề xuất một giá trị có thể. Ví dụ: biểu mẫu yêu cầu một trường học có thể có nhãn cho những gì nó yêu cầu, nhưng sau đó đề xuất "Trường trung học mẫu Forest Hills" trong phần giữ chỗ làm giá trị ví dụ:

School Name:

Sự khác biệt giữa :placeholder-shownvà::placeholder

:placeholder-shownlà để chọn chính đầu vào khi văn bản giữ chỗ của nó đang được hiển thị. Trái ngược với việc ::placeholdertạo kiểu cho văn bản chỗ dành sẵn.

Đây là sơ đồ:

Tôi thấy điều này rất khó hiểu vì:

  1. các thông số kỹ thuật chỉ có :placeholder-shownvà không::placeholder
  2. :placeholder-shown vẫn có thể ảnh hưởng đến kiểu dáng của văn bản chỗ dành sẵn, vì nó là phần tử mẹ (ví dụ: font-size).

Lưu ý rằng đó :placeholder-shownlà một lớp giả (nó là một phần tử ở một trạng thái cụ thể) và ::placeholderlà một phần tử giả (một thứ hiển thị không thực sự có trong DOM). Phân biệt bằng dấu hai chấm đơn so với dấu hai chấm.

Tab Atkins đã xóa nó cho tôi qua email:

:placeholder-shown, là một lớp giả, phải chọn một phần tử hiện có. Nó chọn đầu vào bất cứ khi nào bạn ở trạng thái hiển thị trình giữ chỗ. Phần ::placeholdertử giả bao bọc văn bản trình giữ chỗ thực tế.

Nếu bạn cần tạo kiểu cho văn bản chỗ dành sẵn

Sử dụng ::placeholder (thực tế, sử dụng tất cả các tiền tố của nhà cung cấp điên rồ cho nó) mà chúng tôi đã trình bày chi tiết trong Almanac tại đây.

Thêm thông tin

  • Bộ chọn Cấp 4 Thông số

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
47 51 11 * 79 9

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 81 9,0-9,2