:placeholder-shown
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Lớp giả :placeholder-shown trong CSS (pseudo-class) đại diện cho bất kỳ phần tử <input> hoặc <textarea> nào hiện đang hiển thị văn bản placeholder.
Try it
label {
display: block;
margin-top: 1em;
}
input:placeholder-shown {
background-color: ivory;
border: 2px solid darkorange;
border-radius: 5px;
}
<form>
<label for="name">Full Name:</label>
<input id="name" name="name" type="text" />
<label for="email">Email Address:</label>
<input id="email" name="email" type="email" placeholder="name@example.com" />
<label for="age">Your age:</label>
<input
id="age"
name="age"
type="number"
value="18"
placeholder="You must be 18+" />
</form>
Cú pháp
css
:placeholder-shown {
/* ... */
}
Ví dụ
Ví dụ cơ bản
Ví dụ này áp dụng kiểu font và viền đặc biệt khi placeholder đang được hiển thị.
HTML
html
<input placeholder="Type something here!" />
CSS
css
input {
border: 1px solid black;
padding: 3px;
}
input:placeholder-shown {
border-color: teal;
color: purple;
font-style: italic;
}
Kết quả
Văn bản bị tràn
Khi các trường biểu mẫu quá nhỏ, văn bản placeholder có thể bị cắt theo cách không mong muốn. Bạn có thể sử dụng thuộc tính text-overflow để thay đổi cách hiển thị văn bản bị tràn.
HTML
html
<input id="input1" placeholder="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />
CSS
css
#input2:placeholder-shown {
text-overflow: ellipsis;
}
Kết quả
Trường nhập liệu tùy chỉnh
Ví dụ sau làm nổi bật trường ID sinh viên với kiểu tùy chỉnh.
HTML
html
<form id="test">
<p>
<label for="name">Enter Student Name:</label>
<input id="name" placeholder="Student Name" />
</p>
<p>
<label for="branch">Enter Student Branch:</label>
<input id="branch" placeholder="Student Branch" />
</p>
<p>
<label for="sid">Enter Student ID:</label>
<input
pattern="[0-9]{8}"
title="8 digit ID"
id="sid"
class="student-id"
placeholder="8 digit id" />
</p>
<input type="submit" />
</form>
CSS
css
input {
background-color: #e8e8e8;
color: black;
}
input.student-id:placeholder-shown {
background-color: yellow;
color: red;
font-style: italic;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # selector-placeholder-shown |
| Selectors Level 4 # placeholder-shown-pseudo |
Tương thích trình duyệt
Xem thêm
- Phần tử giả
::placeholdertạo kiểu cho chính placeholder đó. - Các phần tử HTML liên quan:
<input>,<textarea> - HTML forms