Đổi màu sắc Input placeholder CSS HTML 5, Change Color Placeholder như thế nào

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 20/1/21.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,028
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cho mình hỏi làm sao để đổi màu sắc Input placeholder CSS HTML 5, Change Color Placeholder như thế nào vậy? mình có sử dụng code trên mạng mà không được: input[placeholder] mà nó không có đổi, cái màu nó cứ nhạt hơn cái màu mình cần, ví dụ mình đổi màu red, mà nó cứ nhạt nhạt không ra đúng màu đỏ khi Placeholder vào hicc.

    Mình muốn đổi màu placeholder trong thẻ input y chang màu đỏ, không mờ hoặc opencity đi chút nào thì làm như thế nào.
     
    Cảm ơn đã xem bài:

    Đổi màu sắc Input placeholder CSS HTML 5, Change Color Placeholder như thế nào

    seolagi, 20/1/21
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,895
    Đã được thích:
    1,198
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bạn add code sau vào để đổi màu cho các trình duyệt nhé, code bạn ở trên đúng rồi, mà nó không áp dụng cho tất cả các trình duyệt, nên bạn xem sẽ bị mờ ở 1 số trình duyệt, để fix các trình duyệt bạn add code vào như dưới:

    Áp dụng cho tất cả các thẻ placeholder.
    HTML:
    /* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}
    Chỉ áp dụng riêng cho thẻ input thì thêm như sau:
    HTML:
    /* do not group these rules */
input::-webkit-input-placeholder {
    color: #000;
}
input:-moz-placeholder {
    /* FF 4-18 */
    color: #000;
    opacity: 1;
}
input::-moz-placeholder {
    /* FF 19+ */
    color: #000;
    opacity: 1;
}
input:-ms-input-placeholder {
    /* IE 10+ */
    color: #000;
}
input::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #000;
}
input::placeholder {
    /* modern browser */
    color: #000;
}
     
    admin, 20/1/21
    #2