الصنف :placeholder-shown

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الصنف الزائف ‎: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

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