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
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,878
    Đã được thích:
    1,193
    Đ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;
    }
    
    Áp dung riêng cho 1 thẻ input cố định thì code sau:
    HTML:
    <input type="text" name="your-name" value="" class="cs-input" placeholder="Họ và tên (*)">
    Mã:
    .cs-input::placeholder { /* chạy tốt trên Chrome, Firefox, Opera, Safari 10.1+ */
        color: orange !important;
        opacity: 1; /* Firefox */
    }
    .cs-input:-ms-input-placeholder { /* chạy trên Internet Explorer 10-11 */
        color: orange !important;
    }
    .cs-input::-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

    Chỉnh sửa cuối: 3/11/21
  2. huynhtanbao
    Tham gia ngày:
    15/8/18
    Bài viết:
    16
    Đã đượ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
    Tham gia ngày:
    3/11/18
    Bài viết:
    18
    Đã đượ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
    Tham gia ngày:
    3/11/18
    Bài viết:
    18
    Đã đượ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
    Tham gia ngày:
    9/7/19
    Bài viết:
    9
    Đã đượ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
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 icon trước thẻ tag <li> của <ul thành đấu check v xanh CSS HTML như thế nào? 21/7/22
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi màu sắc icon .svg trong background image css html, change svg color in background image 23/11/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi màu sắc Input placeholder CSS HTML 5, Change Color Placeholder như thế nào 20/1/21