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

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...."> 

Để 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;
}