Cách thay đổi màu văn bản giữ chỗ trong trường nhập HTML bằng CSS

Tạo kiểu cho văn bản giữ chỗ bằng CSS

Khi làm việc với biểu mẫu HTML, bạn có thể muốn tùy chỉnh giao diện của văn bản giữ chỗ trong các trường nhập. Mặc dù Chrome v4 và các trình duyệt khác hỗ trợ thuộc tính giữ chỗ trên các phần tử input[type=text] nhưng việc chỉ áp dụng các kiểu CSS cho thuộc tính này không phải lúc nào cũng hoạt động như mong đợi.

Ví dụ: cố gắng thay đổi màu văn bản giữ chỗ bằng bộ chọn CSS tiêu chuẩn sẽ không mang lại kết quả mong muốn. Bài viết này khám phá cách bạn có thể sửa đổi màu sắc của văn bản giữ chỗ một cách hiệu quả bằng cách sử dụng các phần tử giả CSS chính xác và các quy tắc dành riêng cho trình duyệt.

Hiểu kỹ thuật tạo kiểu văn bản giữ chỗ

Kịch bản đầu tiên sử dụng ::placeholder, một phần tử giả CSS nhắm mục tiêu cụ thể đến văn bản giữ chỗ của trường đầu vào. Điều này rất quan trọng vì bộ chọn CSS tiêu chuẩn không ảnh hưởng đến văn bản giữ chỗ. Bằng cách sử dụng input::placeholder, chúng ta có thể áp dụng kiểu trực tiếp cho văn bản giữ chỗ, chẳng hạn như thay đổi màu của nó thành màu đỏ. Ngoài ra, tập lệnh bao gồm các bộ chọn dành riêng cho trình duyệt như input:-moz-placeholder dành cho Mozilla Firefox và input::-ms-input-placeholder dành cho Internet Explorer và Microsoft Edge. Các bộ chọn này đảm bảo khả năng tương thích trên các trình duyệt khác nhau, cho phép màu văn bản giữ chỗ được tạo kiểu thống nhất bất kể lựa chọn trình duyệt của người dùng.

Tập lệnh thứ hai sử dụng JavaScript để tự động thay đổi màu văn bản giữ chỗ. Nó bắt đầu với DOMContentLoaded sự kiện để đảm bảo tập lệnh chỉ chạy sau khi tài liệu HTML ban đầu được tải đầy đủ. Các querySelector phương thức sau đó được sử dụng để chọn phần tử đầu vào. Trình xử lý sự kiện được thêm vào thành phần này để xử lý các sự kiện lấy nét và làm mờ. Khi trường đầu vào lấy tiêu điểm, văn bản giữ chỗ sẽ bị xóa và màu văn bản đầu vào được đặt thành màu đen. Khi trường nhập bị mất tiêu điểm, văn bản giữ chỗ sẽ được khôi phục và màu của nó được đặt thành màu đỏ. Các setAttribute phương thức được sử dụng để cập nhật thuộc tính giữ chỗ một cách linh hoạt, đảm bảo văn bản giữ chỗ xuất hiện và biến mất như mong đợi.

input::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

/* For Mozilla Firefox */
input:-moz-placeholder {
  color: red;
  opacity: 1;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder {
  color: red;
}

/* For Microsoft Edge */
input::-ms-input-placeholder {
  color: red;
}

document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector('input[type="text"]');

  input.addEventListener('focus', function() {
    input.style.color = "black";
    input.setAttribute('placeholder', '');
  });

  input.addEventListener('blur', function() {
    input.style.color = "red";
    input.setAttribute('placeholder', 'Value');
  });
});

Các kỹ thuật nâng cao để tạo kiểu giữ chỗ

Ngoài các phương pháp CSS và JavaScript cơ bản, còn có các kỹ thuật nâng cao hơn để tạo kiểu cho văn bản giữ chỗ. Một phương pháp như vậy là sử dụng các biến CSS để tạo ra một hệ thống tạo kiểu năng động hơn. Biến CSS, còn được gọi là thuộc tính tùy chỉnh, cho phép nhà phát triển lưu trữ các giá trị có thể được sử dụng lại trong toàn bộ biểu định kiểu. Điều này có thể đơn giản hóa quá trình cập nhật kiểu trên nhiều thành phần. Ví dụ: bằng cách xác định thuộc tính tùy chỉnh cho màu giữ chỗ, bạn có thể dễ dàng thay đổi màu ở một nơi mà không cần sửa đổi nhiều quy tắc CSS.

Một khía cạnh khác cần xem xét là việc sử dụng các khung và thư viện cung cấp khả năng tạo kiểu mở rộng. Các thư viện như Bootstrap và các khung như Tailwind CSS cung cấp các lớp được xác định trước có thể giúp tạo kiểu cho các thành phần của biểu mẫu, bao gồm cả phần giữ chỗ. Những công cụ này có thể tiết kiệm thời gian và đảm bảo tính nhất quán giữa các phần khác nhau của ứng dụng. Ngoài ra, việc tận dụng các bộ tiền xử lý như SASS hoặc LESS có thể nâng cao hơn nữa CSS với các tính năng như lồng, mixin và kế thừa, giúp mã dễ bảo trì và có khả năng mở rộng hơn.

Suy nghĩ cuối cùng về kỹ thuật tạo kiểu giữ chỗ

Việc thay đổi màu của văn bản giữ chỗ trong các trường nhập HTML yêu cầu kết hợp các giải pháp CSS và JavaScript. Việc sử dụng các phần tử giả CSS và bộ chọn dành riêng cho trình duyệt sẽ đảm bảo khả năng tương thích, trong khi JavaScript cho phép thay đổi động dựa trên tương tác của người dùng. Các kỹ thuật nâng cao như biến CSS, khung và bộ tiền xử lý có thể nâng cao hơn nữa quá trình tạo kiểu, giúp quá trình này hiệu quả hơn và dễ bảo trì hơn. Nắm vững các phương pháp này cho phép kiểm soát tốt hơn tính thẩm mỹ của hình thức, cải thiện trải nghiệm người dùng.