::placeholder

Try it

input {
  margin-top: 0.5rem;
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: red;
}

<label for="first-name">Your phone number:</label><br />

<input
  id="first-name"
  type="tel"
  name="phone"
  minlength="9"
  maxlength="9"
  placeholder="It must be 9 digits" />

Chỉ tập hợp con các thuộc tính CSS áp dụng cho phần tử giả ::first-line mới có thể được dùng trong quy tắc dùng ::placeholder trong bộ chọn.

Cú pháp

::placeholder {
  /* ... */
}

Khả năng tiếp cận

Độ tương phản màu sắc

Tỷ lệ tương phản

Văn bản giữ chỗ thường có màu nhạt hơn để cho biết đó là gợi ý về loại đầu vào hợp lệ, và không phải là đầu vào thực sự.

Điều quan trọng là đảm bảo tỷ lệ tương phản giữa màu văn bản giữ chỗ và nền của ô nhập liệu đủ cao để những người có vấn đề về thị lực thấp có thể đọc được, đồng thời đảm bảo có đủ sự khác biệt giữa màu văn bản giữ chỗ và màu văn bản đầu vào để người dùng không nhầm lẫn giữa chúng.

Tỷ lệ tương phản màu sắc được xác định bằng cách so sánh độ sáng của văn bản giữ chỗ và giá trị màu nền ô nhập liệu. Để đáp ứng Hướng dẫn về khả năng tiếp cận nội dung web (WCAG) hiện tại, cần tỷ lệ 4.5:1 cho nội dung văn bản và 3:1 cho văn bản lớn hơn như tiêu đề. Văn bản lớn được định nghĩa là 18.66px và đậm hoặc lớn hơn, hoặc 24px hoặc lớn hơn.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Khả năng sử dụng

Văn bản giữ chỗ có đủ độ tương phản màu sắc có thể bị hiểu nhầm là đầu vào đã nhập. Văn bản giữ chỗ cũng sẽ biến mất khi người dùng nhập nội dung vào phần tử <input>. Cả hai trường hợp này đều có thể cản trở việc hoàn thành biểu mẫu thành công, đặc biệt đối với những người có lo ngại về nhận thức.

Một cách tiếp cận thay thế để cung cấp thông tin giữ chỗ là bao gồm nó bên ngoài ô nhập liệu ở gần về mặt hình ảnh, sau đó sử dụng aria-describedby để liên kết lập trình <input> với gợi ý của nó.

Với cách triển khai này, nội dung gợi ý có sẵn ngay cả khi thông tin được nhập vào trường nhập liệu, và ô nhập liệu trông trống khi trang được tải. Hầu hết các công nghệ đọc màn hình sẽ sử dụng aria-describedby để đọc gợi ý sau khi văn bản nhãn của ô nhập liệu được thông báo, và người dùng đang dùng trình đọc màn hình có thể tắt tiếng nếu họ thấy thông tin thêm là không cần thiết.

<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Chế độ tương phản cao của Windows

Văn bản giữ chỗ sẽ xuất hiện với cùng kiểu dáng như nội dung văn bản do người dùng nhập khi được hiển thị trong Chế độ tương phản cao của Windows. Điều này sẽ khiến một số người khó xác định nội dung nào đã được nhập và nội dung nào là văn bản giữ chỗ.

Nhãn

Các placeholder không phải là sự thay thế cho phần tử <label>. Nếu không có nhãn được liên kết lập trình với ô nhập liệu bằng sự kết hợp của các thuộc tính for và id, các công nghệ hỗ trợ như trình đọc màn hình không thể phân tích cú pháp các phần tử <input>.

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Ví dụ

Thay đổi giao diện của placeholder

Ví dụ này cho thấy một số điều chỉnh bạn có thể thực hiện đối với các kiểu của văn bản giữ chỗ.

HTML

<input placeholder="Type here" />

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
  opacity: 0.5;
}

Kết quả

Văn bản không trong suốt

Một số trình duyệt làm cho văn bản giữ chỗ kém trong suốt hơn. Nếu bạn muốn văn bản hoàn toàn không trong suốt, hãy đặt giá trị thuộc tính color một cách rõ ràng. Giá trị currentColor có thể được dùng để có cùng màu với phần tử ô nhập liệu tương ứng.

HTML

<input placeholder="Color set by browser" />
<input placeholder="Same color as input" class="explicit-color" />
<input placeholder="Semi-opaque text color" class="opacity-change" />

CSS

input {
  font-weight: bold;
  color: green;
}

.explicit-color::placeholder {
  /* use the same color as input element to avoid the browser set default color */
  color: currentColor;
}

.opacity-change::placeholder {
  /* less opaque text */
  color: color-mix(in srgb, currentColor 70%, transparent);
}

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Lớp giả :placeholder-shown tạo kiểu cho phần tử có placeholder đang hoạt động.
• Các phần tử HTML liên quan: <input>, <textarea>
• HTML forms