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,236
    Đã được thích:
    936
    Đ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:
    21
    Đã đượ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
     


Like và Share ủng hộ ITSEOVN