CSS/:placeholder-shown

الصنف الزائف ‎:placeholder-shown في CSS (أي pseudo-class) يُمثِّل أي عنصر <input> أو <textarea> الذي يُظهِر نصًا بديلًا (placeholder text).

:placeholder-shown {
  border: 2px solid silver;
}

الشكل العام لهذا المحدد:

:placeholder-shown

أمثلة

لاحظ كيف سيتغيّر تنسيق العنصر <input> عند اختفاء النص البديل (أي بعد الكتابة في الحقل):

<input placeholder="Type something here!">

شيفرة CSS:

input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}

في الشاشات الضيقة كشاشات الهواتف الذكية سيكون عرض حقول البحث وغيرها من حقول النماذج قليلًا، وهذا يؤدي إلى اقتصاص النص البديل بطريقة غير مستحبة، ومن الأفضل عادةً تغيير هذا السلوك باستخدام الخاصية text-overflow:

<input placeholder="Enter something into this field, if you please!">

شيفرة CSS:

input:placeholder-shown {
  text-overflow: ellipsis;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	47.0	51.0	غير مدعومة	34.0	9.0

مصادر ومواصفات

• مسودة Selectors Level 4.