<input type="color">

Try it

<p>Choose your colors:</p>

<div>
  <input type="color" id="foreground" name="foreground" value="#e66465" />
  <label for="foreground">Foreground color</label>
</div>

<div>
  <input
    type="color"
    id="background"
    name="background"
    value="oklab(50% 0.1 0.1 / 0.5)"
    colorspace="display-p3"
    alpha />
  <label for="background">Background color</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Giá trị

Một giá trị màu CSS.

Thuộc tính bổ sung

Ngoài thuộc tính toàn cục và thuộc tính đầu vào chung cho tất cả các phần tử <input>, đầu vào color cũng hỗ trợ các thuộc tính sau:

alpha Thử nghiệm

Thuộc tính boolean, nếu có, cho biết thành phần alpha của màu có thể được người dùng thao tác và không nhất thiết phải hoàn toàn mờ đục.

colorspace Thử nghiệm

Xác định color space cho màu sắc và gợi ý giao diện người dùng mong muốn cho widget chọn màu. Các giá trị enumerated có thể là:

• "limited-srgb": Màu nằm trong không gian màu sRGB. Bao gồm các giá trị rgb(), hsl(), hwb(), và <hex-color>. Giá trị màu bị giới hạn ở 8-bit mỗi thành phần r, g, và b. Đây là giá trị mặc định.
• "display-p3": Không gian màu Display P3, ví dụ: color(display-p3 1.84 -0.19 0.72 / 0.6)

Sử dụng đầu vào color

Đầu vào kiểu color đơn giản do số lượng thuộc tính hỗ trợ hạn chế.

Cung cấp màu mặc định

Bạn có thể cập nhật ví dụ trên để đặt giá trị mặc định, sao cho bộ chọn màu được điền sẵn với màu mặc định và bộ chọn màu (nếu có) cũng mặc định theo màu đó.

<input type="color" value="#ff0000" />
<input
  type="color"
  id="body"
  name="body"
  value="oklab(50% 0.1 0.1 / 0.5)"
  colorspace="display-p3"
  alpha />

Nếu bạn không chỉ định giá trị hoặc giá trị không hợp lệ hoặc không được trình duyệt hỗ trợ, giá trị mặc định sẽ là #000000, màu đen mờ đục.

Theo dõi thay đổi màu

Như với các kiểu <input> khác, có hai sự kiện có thể được dùng để phát hiện thay đổi giá trị màu: input và change. input được kích hoạt trên phần tử <input> mỗi khi màu thay đổi. Sự kiện change được kích hoạt khi người dùng đóng bộ chọn màu. Trong cả hai trường hợp, bạn có thể xác định giá trị mới của phần tử bằng cách xem value của nó.

Đây là một ví dụ theo dõi thay đổi theo thời gian của giá trị màu:

colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", watchColorPicker);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Chọn giá trị

Khi trình duyệt không hỗ trợ giao diện chọn màu, triển khai đầu vào màu sẽ là ô văn bản tự động xác thực nội dung để đảm bảo giá trị đúng định dạng. Trong trường hợp này bạn có thể dùng phương thức select() để chọn văn bản đang có trong trường chỉnh sửa.

Nếu trình duyệt thay vào đó dùng bộ chọn màu, select() không có tác dụng. Bạn nên lưu ý hành vi này để mã của bạn có thể phản hồi phù hợp trong cả hai trường hợp.

colorPicker.select();

Kiểm tra hợp lệ

Giá trị đầu vào màu được coi là không hợp lệ nếu user agent không thể chuyển đổi đầu vào của người dùng sang ký hiệu thập lục phân chữ thường bảy ký tự. Nếu điều này xảy ra, pseudo-class :invalid được áp dụng cho phần tử.

Ví dụ

Hãy tạo một ví dụ làm nhiều hơn với đầu vào màu bằng cách theo dõi các sự kiện change và input để lấy màu mới và áp dụng nó cho mọi phần tử <p> trong tài liệu.

HTML

HTML khá đơn giản — một vài đoạn văn bản mô tả với <input> kiểu color có ID color-picker, mà chúng ta sẽ dùng để thay đổi màu văn bản của các đoạn.

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" id="color-picker" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

JavaScript

Khởi tạo

Đoạn mã sau khởi tạo đầu vào màu:

const defaultColor = "#0000ff";
const colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", updateAll);
colorPicker.select();

Đoạn này lấy tham chiếu đến phần tử <input> màu trong biến colorPicker, sau đó đặt giá trị đầu vào màu thành giá trị trong defaultColor. Tiếp theo, sự kiện input của đầu vào màu được thiết lập để gọi hàm updateFirst(), và sự kiện change được thiết lập để gọi updateAll(). Cả hai đều được xem bên dưới.

Cuối cùng, chúng ta gọi select() để chọn nội dung văn bản của đầu vào màu nếu điều khiển được triển khai dưới dạng trường văn bản (điều này không có tác dụng nếu giao diện bộ chọn màu được cung cấp thay thế).

Phản hồi thay đổi màu

Chúng ta cung cấp hai hàm xử lý thay đổi màu. Hàm updateFirst() được gọi để phản hồi sự kiện input. Nó thay đổi màu của phần tử đoạn đầu tiên trong tài liệu để khớp với giá trị mới của đầu vào màu. Vì sự kiện input được kích hoạt mỗi khi có điều chỉnh giá trị (ví dụ: khi độ sáng của màu được tăng lên), chúng sẽ xảy ra nhiều lần khi sử dụng bộ chọn màu.

function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

Khi bộ chọn màu được đóng, cho biết giá trị sẽ không thay đổi nữa (trừ khi người dùng mở lại bộ chọn màu), sự kiện change được gửi đến phần tử. Chúng ta xử lý sự kiện đó bằng hàm updateAll(), sử dụng Event.target.value để lấy màu cuối cùng được chọn:

function updateAll(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Hàm này đặt màu của mọi khối <p> sao cho thuộc tính color của nó khớp với giá trị hiện tại của đầu vào màu, được tham chiếu bằng event.target.

Kết quả

Kết quả cuối cùng trông như thế này:

Tóm tắt kỹ thuật

Thông số kỹ thuật

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

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

Xem thêm

• HTMLInputElement.alpha
• HTMLInputElement.colorspace