background

Tìm hiểu cách thêm màu vào các thành phần CSS của bạn bằng cách sử dụng mã màu Hex, giá trị RGB và HSL.

Màu sắc Placeholder CSS

Các placeholder, những phần tử văn bản thường bị làm mờ bên trong một input, có thể khó khăn để định dạng. May mắn thay, chúng tôi đã tìm ra một giải pháp CSS ngắn gọn nhưng hiệu quả để định dạng văn bản placeholder của bạn với bất kỳ màu sắc và độ trong suốt nào bạn muốn. Hãy đọc tiếp để biết mã.

Thay đổi màu sắc văn bản placeholder

Hãy bắt đầu với một input đơn giản và một số văn bản placeholder, trong ví dụ này chúng tôi sẽ sử dụng từ 'search' nhưng bạn có thể sử dụng bất kỳ thứ gì bạn muốn. HTML cơ bản như sau:

html

<body>
  <input placeholder="Search">
</body>

Văn bản placeholder (và textarea) mặc định là màu xám nhạt, tuy nhiên, chúng ta có thể thay đổi điều đó với một vài dòng CSS. Ở đây, chúng tôi sẽ tô màu văn bản input thành màu đỏ bằng cách sử dụng tên màu HTML, nhưng bất kỳ phương pháp màu nào cũng đều đủ (HEX, RGB, HSL).

html

::--webkit-input-placeholder { /* Chrome */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
}

Lưu ý rằng việc bao gồm các tiền tố nhà cung cấp khác nhau là rất quan trọng để hỗ trợ càng nhiều trình duyệt càng tốt. Chỉ có văn bản placeholder của input trên Firefox mặc định có độ trong suốt nhẹ nên không cần thiết phải thiết lập thuộc tính opacity trên IE hoặc Chrome.

Thay đổi màu sắc văn bản placeholder khi tập trung

Được rồi, chúng ta đã thành công trong việc thay đổi màu sắc của văn bản placeholder thành màu đỏ, nhưng sẽ thật tuyệt nếu có điều gì đó xảy ra khi người dùng nhấp vào input của chúng ta. Sử dụng các thuộc tính CSS đã được tiền tố nhà cung cấp tương tự, chúng ta có thể thay đổi độ trong suốt của văn bản placeholder khi tập trung.

html

input {
  outline: none;
  padding: 12px;
  border-radius: 3px;
  border: 1px solid black;
}
::-webkit-input-placeholder { /* Chrome */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus::-webkit-input-placeholder {
  opacity: 0.5;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus:-ms-input-placeholder {
  opacity: 0.5;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus::-moz-placeholder {
  opacity: 0.5;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus:-moz-placeholder {
  opacity: 0.5;
}

Trong ví dụ trên, chúng tôi đã thêm một vài kiểu cơ bản cho chính input và thêm một chuyển tiếp vào độ trong suốt để làm cho trải nghiệm trở nên dễ chịu hơn một chút. Hãy kiểm tra bản demo và thử nghiệm với các thuộc tính và chuyển tiếp CSS khác.

Chia sẻ với bạn bè của bạn!
  • Tweet
  • Post
  • LinkedIn
  • Reddit