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,324
    Đã được thích:
    965
    Đ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
     
  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ỉ
     


Chủ để tương tự : Thay đổi
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Thay đổi menu navbar collapse chế độ thu gọn trên mobi bootstrap 5/5/17
Ngôn ngữ lập trình CSS, HTML, HTML5 Sự thay đổi cách sử dụng trong html, thay đổi và tối ưu các thẻ trong html 17/2/14
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi ngôn ngữ, Change Language Recaptcha Google nhứ thế nào 31/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap 13/8/18

Like và Share ủng hộ ITSEOVN