Thay đổi màu sắc Placeholder CSS thẻ Input HTML

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 25/9/18.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,360
    Đã được thích:
    999
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Mặc định của trình duyệt web như Chrome, Firefox, Opera, Safari 10.1+, Internet Explorer 10-11, Microsoft Edge các thẻ placeholder sẽ có màu nâu bóng mờ ít hoặc nhiều tùy vào trình duyệt, để thay đổi màu sắc cho placeholder của thẻ input này các bạn làm theo các hướng dẫn add css ở dưới với thuộc tính :: placeholder nhé.

    Thẻ Input có placeholder mặc định

    Thẻ Input đã thay đổi placeholder thành màu Cam (orange)

    VD Code:
    Mã:
     <input type="text" placeholder="Màu cam cho placeholder...."> 
    change-color-placeholder-input.jpg

    Để thay đổi bạn chèn code css sau vào file html hoặc file css của bạn với thuộc tính :: placeholder
    Mã:
    ::placeholder { /* chạy tốt trên Chrome, Firefox, Opera, Safari 10.1+ */
        color: orange;
        opacity: 1; /* Firefox */
    }
    
    :-ms-input-placeholder { /* chạy trên Internet Explorer 10-11 */
        color: orange;
    }
    
    ::-ms-input-placeholder { /* chạy trên Microsoft Edge */
        color: orange;
    }
    
    Nếu không thay đổi thì nó đã bị áp bởi 1 rule khác bạn thêm thuộc tính !important để được ưu tiên rule màu bạn muốn nhé.
    Mã:
    ::placeholder { /* chạy tốt trên Chrome, Firefox, Opera, Safari 10.1+ */
        color: orange !important;
        opacity: 1; /* Firefox */
    }
    
    :-ms-input-placeholder { /* chạy trên Internet Explorer 10-11 */
        color: orange !important;
    }
    
    ::-ms-input-placeholder { /* chạy trên Microsoft Edge */
        color: orange !important;
    }
    
     
    Cảm ơn đã xem bài:

    Thay đổi màu sắc Placeholder CSS thẻ Input HTML

    danh sách diễn đàn rao vặt gov chất lượng
    Chỉnh sửa cuối: 25/9/18
  2. huynhtanbao

    huynhtanbao Thành Viên Mới

    Tham gia ngày:
    15/8/18
    Bài viết:
    25
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    cảm ơn rất bổ ích ạ. Thanks you
     
  3. Kế toán Đại Dương

    Kế toán Đại Dương Thành Viên Mới

    Tham gia ngày:
    3/11/18
    Bài viết:
    23
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    chèn vào sau thẻ input trong css
     
  4. Kế toán Đại Dương

    Kế toán Đại Dương Thành Viên Mới

    Tham gia ngày:
    3/11/18
    Bài viết:
    23
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    mình thử sao k được nhỉ
     
  5. datphat123

    datphat123 Thành Viên Mới

    Tham gia ngày:
    9/7/19
    Bài viết:
    10
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Mình mới làm thử nhưng thấy nó sao sao ấy
     


Chủ để tương tự : Thay đổi
Diễn đàn Tiêu đề Date
Rao Vặt Toàn Quốc 4 Khuynh hướng này sẽ thay đổi ngành nghề marketing trong năm mới 10/8/19
Rao Vặt Toàn Quốc Nội tiết tố nữ thay đổi ở những thời kỳ nào? 4/8/19
Rao Vặt Toàn Quốc 10 cách chăm sóc da cần thay đổi 28/7/19
Rao Vặt Toàn Quốc Tottenham sẽ thay đôi cánh 18/7/19
Rao Vặt Toàn Quốc Bị trĩ nên ăn gì – thay đổi nhỏ đem lại hiệu quả to lớn 5/7/19

Like và Share ủng hộ ITSEOVN