:placeholder-shown偽類用於在佔位符文本可見時對輸入框進行樣式設置，當用戶未輸入內容時生效。 1. 它適用於需要視覺反饋的表單場景，如區(qū)分空字段與已填字段；2. 可用於調整邊框、背景色或控制其他元素顯示隱藏；3. 作用於具有placeholder屬性的<input>和元素；4. 常見用法包括高亮必填項、改變邊框顏色或添加過渡動畫；5. 注意其不兼容問題及與::placeholder的區(qū)別，後者用於直接樣式化佔位符文本本身。

The :placeholder-shown pseudo-class in CSS is used to style an input element only when the placeholder text is currently visible . That means it applies styles when the user hasn't entered any value into the input field yet.

This is super handy if you want to change how an input looks when it's empty versus when it has actual content — like adjusting borders, background colors, or even hiding/showing other elements based on whether something's been typed.

When to Use :placeholder-shown

You'll typically reach for :placeholder-shown when building forms where visual feedback matters. For example:

• Styling empty fields differently to guide users
• Making placeholders more readable by tweaking font size or color
• Adjusting padding or layout to improve usability

It works on form elements like <input> and <textarea></textarea> , but not all elements support placeholders — only those that accept text input and have a placeholder attribute.

Here are some common scenarios:

• Highlighting required fields only when they're empty
• Changing border color while the placeholder is shown
• Adding subtle animations or transitions when the user starts typing

How It Works in Practice

Let's say you have a basic text input like this:

 <input type="text" placeholder="Your name">

If you want to style it differently when the placeholder is visible, you could do something like:

 input {
  padding: 10px;
  border: 1px solid #ccc;
}

input:placeholder-shown {
  border-color: #999;
  background-color: #f9f9f9;
}

So while the placeholder shows, the border becomes darker and the background gets a little lighter. Once someone types anything, that style no longer applies.

A few quick notes:

• You can combine it with other pseudo-classes like :focus or :invalid
• The selector doesn't apply once any character (even a space) is entered
• It doesn't target the placeholder text itself — just the input container

Common Pitfalls and Tips

One thing to watch out for: browsers sometimes treat placeholder styling inconsistently. For example, Safari might render placeholder text differently than Chrome unless you explicitly style it using ::placeholder .

Also, don't confuse :placeholder-shown with ::placeholder . The former targets the input element when the placeholder is visible; the latter lets you style the placeholder text directly.

Another tip: use :placeholder-shown for UX improvements, like showing helper text or icons only when the field is empty. For instance, you could hide a "clear" button until the input has text.

And remember — always test across browsers, especially if you're relying on subtle visual cues.

That's the basics of :placeholder-shown . It's not complicated, but it gives you a nice way to make forms feel more responsive and user-friendly without needing JavaScript.

以上是什麼是：佔位符偽造的偽級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！