Phần ::placeholdertử giả (hoặc lớp giả, trong một số trường hợp, tùy thuộc vào việc triển khai trình duyệt) cho phép bạn tạo kiểu cho văn bản chỗ dành sẵn của phần tử biểu mẫu. Như trong, tập văn bản có placeholderthuộc tính:
Bạn có thể tạo kiểu cho văn bản đó trên hầu hết các trình duyệt với sự tập hợp các bộ chọn có tiền tố của nhà cung cấp:
::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )Cảnh báo quan trọng: cú pháp này không chuẩn, do đó tất cả đều gây ra sự điên rồ khi đặt tên. Nó hoàn toàn không xuất hiện trong thông số kỹ thuật. :placeholder-shownlà tiêu chuẩn, và thậm chí các tác giả đặc tả dường như nghĩ rằng đây ::placeholdersẽ là phiên bản tiêu chuẩn hóa.
Giống như bất kỳ psuedo nào, bạn có thể phân chia nó thành các phần tử cụ thể nếu cần, như:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Bản giới thiệu
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ì:
- các thông số kỹ thuật chỉ có
:placeholder-shownvà không::placeholder :placeholder-shownvẫ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:
: trình giữ chỗ được hiển thị, 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 tử giả :: placeholder bao bọc văn bản placeholder thực tế.
Phần tử hay lớp?
Chức năng này không được tiêu chuẩn hóa. Điều đó có nghĩa là mỗi trình duyệt có một ý tưởng khác nhau về cách thức hoạt động của nó.
Firefox ban đầu thực hiện điều này như một lớp giả, nhưng đã thay đổi nó vì nhiều lý do. Để làm cho một câu chuyện dài ngắn, bạn không thể làm được nhiều như vậy với lớp giả.
Ví dụ: nếu bạn muốn thay đổi màu của văn bản khi đầu vào được lấy tiêu điểm. Bạn sẽ sử dụng một bộ chọn như thế input:focus::placeholder, mà bạn sẽ không thể thực hiện với lớp giả (chúng không xếp chồng theo cùng một cách).
IE10 hỗ trợ điều này như một lớp giả, thay vì một phần tử. Mọi người khác đã triển khai một phần tử giả.
Màu trình giữ chỗ của Firefox
Bạn có thể nhận thấy trong Firefox, màu của trình giữ chỗ trông mờ đi như thế nào khi so sánh với các trình duyệt khác. Trong hình ảnh bên dưới, Firefox 43 được hiển thị ở bên trái trong khi Chrome 47 được hiển thị ở bên phải:
Điều này là do, theo mặc định, tất cả các trình giữ chỗ trong Firefox đều có giá trị độ mờ được áp dụng cho chúng, vì vậy để khắc phục điều này, chúng tôi cần đặt lại giá trị đó:
::-moz-placeholder ( opacity: 1; )Bạn có thể xem thêm bằng cách thử bản trình diễn này trên Firefox.
Các kiểu được hỗ trợ
Phần tử giả hỗ trợ tạo kiểu của các thuộc tính này:
fonttính chấtcolorbackgroundtính chấtword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Lớp giả cũng hỗ trợ hầu hết (nếu không phải tất cả) các thuộc tính này, nhưng không linh hoạt vì những lý do đã nêu ở trên.
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 |
|---|---|---|---|---|
| 57 | 19 * | Không | 79 | 10.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Thuộc tính liên quan
Almanac vào ngày 22 tháng 5 năm 2020: trình giữ chỗ được hiển thị
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham