### Thuộc tính **Placeholder** là gì?

Thuộc tính **placeholder** là một tính năng mới được giới thiệu trong HTML5, dành cho các thẻ `` và ``. Tác dụng chính của **placeholder** là cung cấp thêm thông tin cho người dùng, giúp họ biết cần nhập dữ liệu gì vào các trường nhập liệu.</p> <p>### Trình duyệt hỗ trợ</p> <p>Thuộc tính **placeholder** được hầu hết các trình duyệt hiện đại hỗ trợ. Bạn có thể kiểm tra chi tiết về sự hỗ trợ này tại [caniuse.com](https://caniuse.com/#feat=input-placeholder).</p> <p>### Các loại input type dùng **placeholder**</p> <p>Dưới đây là danh sách các loại input type mà bạn có thể sử dụng với thuộc tính **placeholder**:<br /> – **text**<br /> – **search**<br /> – **url**<br /> – **tel**<br /> – **email**<br /> – **password**<br /> – **textarea**</p> <p>### Style cho văn bản **placeholder**</p> <p>Nếu bạn muốn tùy chỉnh giao diện của văn bản **placeholder**, bạn có thể sử dụng pseudo-element `::placeholder` trong CSS. Hầu hết các trình duyệt hiện đại đều hỗ trợ tính năng này, nhưng đối với các trình duyệt cũ hơn, bạn sẽ cần sử dụng vendor prefixes.</p> <p>“`css<br /> ::placeholder {<br /> color: deeppink;<br /> font-size: 5rem;<br /> text-transform: uppercase;<br /> }<br /> “`</p> <p>“`html<br /> <input placeholder="CSS Placeholder"><br /> “`</p> <p>### Thêm Vendor Prefixes</p> <p>Dưới đây là cách sử dụng vendor prefixes cho các trình duyệt khác nhau:</p> <p>“`css<br /> /* Modern Browser */<br /> ::placeholder {<br /> color: deeppink;<br /> }</p> <p>/* WebKit, Edge */<br /> ::-webkit-input-placeholder {<br /> color: deeppink;<br /> }</p> <p>/* Firefox 4-18 */<br /> :-moz-placeholder {<br /> color: deeppink;<br /> opacity: 1;<br /> }</p> <p>/* Firefox 19+ */<br /> ::-moz-placeholder {<br /> color: deeppink;<br /> opacity: 1;<br /> }</p> <p>/* IE 10-11 */<br /> :-ms-input-placeholder {<br /> color: deeppink;<br /> }</p> <p>/* Edge */<br /> ::-ms-input-placeholder {<br /> color: deeppink;<br /> }<br /> “`</p> <p>### Các thuộc tính style được hỗ trợ cho **placeholder**</p> <p>Dưới đây là danh sách các thuộc tính style mà bạn có thể áp dụng cho văn bản **placeholder**:</p> <p>| Thuộc tính Style | Mô tả |<br /> |————————-|———————————————————————–|<br /> | **background** | Các thuộc tính liên quan đến nền |<br /> | **color** | Màu sắc của văn bản |<br /> | **font** | Các thuộc tính liên quan đến phông chữ |<br /> | **letter-spacing** | Khoảng cách giữa các chữ cái |<br /> | **line-height** | Chiều cao của dòng |<br /> | **opacity** | Độ trong suốt |<br /> | **text-decoration** | Trang trí văn bản |<br /> | **text-indent** | Lề đầu dòng |<br /> | **text-transform** | Chuyển đổi chữ hoa/chữ thường |<br /> | **vertical-align** | Căn chỉnh theo chiều dọc |<br /> | **word-spacing** | Khoảng cách giữa các từ |</p> <p>### Lưu ý quan trọng</p> <p>Khi sử dụng vendor prefixes, bạn không thể gộp tất cả các prefixes lại thành một dòng và phân cách bằng dấu phẩy (,). Điều này sẽ không hoạt động.</p> <p>“`css<br /> /* Cách này không hoạt động */<br /> ::placeholder,<br /> ::-webkit-input-placeholder,<br /> :-moz-placeholder,<br /> ::-moz-placeholder,<br /> :-ms-input-placeholder,<br /> ::-ms-input-placeholder {<br /> color: deeppink;<br /> font-size: 5rem;<br /> text-transform: uppercase;<br /> }<br /> “`</p> <p>### Xem Demo Styling</p> <p>Dưới đây là một ví dụ về cách bạn có thể style cho văn bản **placeholder**:</p> <p>“`html</p> <style> ::placeholder { color: deeppink; font-size: 1.5rem; text-transform: uppercase; }</p> <p> /* WebKit, Edge */ ::-webkit-input-placeholder { color: deeppink; }</p> <p> /* Firefox 4-18 */ :-moz-placeholder { color: deeppink; opacity: 1; }</p> <p> /* Firefox 19+ */ ::-moz-placeholder { color: deeppink; opacity: 1; }</p> <p> /* IE 10-11 */ :-ms-input-placeholder { color: deeppink; }</p> <p> /* Edge */ ::-ms-input-placeholder { color: deeppink; } </style> <p><input placeholder="CSS Placeholder"><br /> “`</p> <p>Bằng cách sử dụng thuộc tính **placeholder** và tùy chỉnh style cho nó, bạn có thể tạo ra các form nhập liệu đẹp mắt và dễ sử dụng hơn cho người dùng.</p> </div><!-- .entry-content --> <div class="entry-footer"> <span class="entry-tags"> </span><!-- .entry-tags --> </div><!-- .entry-footer --> </article><!-- #post-## --> <div class="entry-related"> <h3>Related Posts</h3> <div class="content-loop related-loop clear"> <div id="post-3992" class="post-3992 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/play-down-la-gi-vietjack-com">Play down là gì – VietJack.com</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/play-down-la-gi-vietjack-com#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Dưới đây là bài viết về chủ đề “play down là gì” theo yêu cầu của bạn: Bạn đã bao… </div><!-- .entry-summary --> </div><!-- #post-3992 --> <div id="post-3991" class="post-3991 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/bot-nan-play-doh-co-an-toan-khong-top-5-2">Bột nặn Play-Doh có an toàn không? Top 5 …</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/bot-nan-play-doh-co-an-toan-khong-top-5-2#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Dưới đây là bài viết được viết lại theo yêu cầu của bạn: Play dough là một loại đồ chơi… </div><!-- .entry-summary --> </div><!-- #post-3991 --> <div id="post-3990" class="post-3990 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/bot-nan-play-doh-co-an-toan-khong-top-5">Bột nặn Play-Doh có an toàn không? Top 5 …</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/bot-nan-play-doh-co-an-toan-khong-top-5#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Dưới đây là bài viết được viết lại theo yêu cầu của bạn: Play-Doh là một loại bột nặn đồ… </div><!-- .entry-summary --> </div><!-- #post-3990 --> <div id="post-3989" class="post-3989 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/choi-ban-tieng-anh-la-gi-english-dol-dictionary">chơi bẩn Tiếng Anh là gì – english – DOL Dictionary</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/choi-ban-tieng-anh-la-gi-english-dol-dictionary#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Trong cuộc sống hàng ngày, chúng ta thường nghe đến cụm từ “chơi bẩn” hay “play dirty” trong tiếng Anh.… </div><!-- .entry-summary --> </div><!-- #post-3989 --> <div id="post-3988" class="post-3988 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/phep-dich-play-dead-thanh-tieng-viet">Phép dịch “play dead” thành Tiếng Việt</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/phep-dich-play-dead-thanh-tieng-viet#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Dưới đây là bài viết được viết lại theo yêu cầu của bạn: Play dead là một cụm từ tiếng… </div><!-- .entry-summary --> </div><!-- #post-3988 --> <div id="post-3987" class="post-3987 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/huong-dan-cach-dung-dong-tu-play-khi-noi-ve-the-thao">Hướng dẫn cách dùng động từ Play khi nói về thể thao</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/huong-dan-cach-dung-dong-tu-play-khi-noi-ve-the-thao#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Dưới đây là bài viết được viết lại theo yêu cầu của bạn: Play cycling là một cụm từ tiếng… </div><!-- .entry-summary --> </div><!-- #post-3987 --> <div id="post-3986" class="post-3986 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/cricket-dinh-nghia-trong-tu-dien-tieng-anh-cambridge">CRICKET | Định nghĩa trong Từ điển tiếng Anh Cambridge</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/cricket-dinh-nghia-trong-tu-dien-tieng-anh-cambridge#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Play cricket là gì? Đây là một câu hỏi thú vị mà nhiều người Việt Nam đang tìm hiểu. Cricket… </div><!-- .entry-summary --> </div><!-- #post-3986 --> <div id="post-3985" class="post-3985 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/play-catch-la-gi-y-nghia-cua-play-catch-dich-nghia-online">Play catch là gì? Ý nghĩa của play catch – Dịch Nghĩa Online</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/play-catch-la-gi-y-nghia-cua-play-catch-dich-nghia-online#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Here’s the rewritten article in Vietnamese, incorporating the guidelines you provided: Play catch là gì? Khám phá trò chơi đơn… </div><!-- .entry-summary --> </div><!-- #post-3985 --> <div id="post-3984" class="post-3984 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/phep-dich-play-cards-thanh-tieng-viet">Phép dịch “play cards” thành Tiếng Việt</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/phep-dich-play-cards-thanh-tieng-viet#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Dưới đây là bài viết về chủ đề “play cards là gì” theo yêu cầu của bạn: Play cards là… </div><!-- .entry-summary --> </div><!-- #post-3984 --> <div id="post-3983" class="post-3983 post type-post status-publish format-standard hentry category-blog"> <div class="entry-header"> <h2 class="entry-title"><a href="https://tasteofthemoon.com/cau-hop-dong-wikipedia">Cầu hợp đồng – Wikipedia</a></h2> <div class="entry-meta"> <span class="entry-category"><a href="https://tasteofthemoon.com/blog">Blog</a> </span> <span class="entry-date">15 Tháng mười, 2024</span> <span class="sep">•</span> <span class='entry-comment'><a href="https://tasteofthemoon.com/cau-hop-dong-wikipedia#respond" class="comments-link" >0 Comment</a></span> </div><!-- .entry-meta --> </div><!-- .entry-header --> <div class="entry-summary"> Dưới đây là bài viết được viết lại về chủ đề “play bridge là gì” theo yêu cầu: Play bridge… </div><!-- .entry-summary --> </div><!-- #post-3983 --> </div><!-- .related-loop --> </div><!-- .entry-related --> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Để lại một bình luận <small><a rel="nofollow" id="cancel-comment-reply-link" href="/styling-placeholder-text-cua-the-input-voi-css-ntcde-com#respond" style="display:none;">Hủy</a></small></h3><form action="https://tasteofthemoon.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Email của bạn sẽ không được hiển thị công khai.</span> <span class="required-field-message">Các trường bắt buộc được đánh dấu <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Bình luận <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Tên *

Email *

Trang web

Lưu tên của tôi, email, và trang web trong trình duyệt này cho lần bình luận kế tiếp của tôi.