Thay Đổi Màu Cho HTML5 Input

Thay Đổi Màu Cho HTML5 Input


Ngày 5 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách thiết lập màu cho placeholder trong ô input HTML5.

Input-placeholder Color CSS

Trong phần này chúng ta sẽ sử dụng CSS ::placeholder selector để change color place holder trong ô input HTML. Để hiểu rõ hơn bạn xem đoạn code sau nha:

::placeholder{color: blue}

Tuy nhiên để hoạt động được trên nhiều trình duyệt khác nhau thì chúng ta sẽ cần phải thêm các tiền tố phía trước như đoạn mã sau đây nha:

/* Chrome,Opera,Safari */
::-webkit-input-placeholder { 
  color: blue;
}
/* Firefox 19+ */
::-moz-placeholder { 
  color: blue;
}
/* Firefox 18- */
:-moz-placeholder { 
  color: blue;
}
/* IE 10+ */
:-ms-input-placeholder {
  color: blue;
}

Còn bây giờ chúng ta sẽ đi vào ví dụ dự án trên Codepen để thấy kết quả nha.

See the Pen change place holder input by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách để Change placeholder text CSS cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!