عرض مصدر CSS/:placeholder-shown

<noinclude>{{DISPLAYTITLE: الصنف <code dir="ltr">:placeholder-shown</code>}}</noinclude>
الصنف الزائف <code>‎:placeholder-shown</code> في CSS (أي pseudo-class) يُمثِّل أي عنصر <code>[[HTML/input|<input>]]</code> أو <code>[[HTML/textarea|<textarea>]]</code> الذي يُظهِر نصًا بديلًا (placeholder text).<syntaxhighlight lang="css">
:placeholder-shown {
  border: 2px solid silver;
}
</syntaxhighlight>الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
:placeholder-shown
</syntaxhighlight>

== أمثلة ==
لاحظ كيف سيتغيّر تنسيق العنصر <code>[[HTML/input|<input>]]</code> عند اختفاء النص البديل (أي بعد الكتابة في الحقل):
<syntaxhighlight lang="html">
<input placeholder="Type something here!">

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}
</syntaxhighlight>في الشاشات الضيقة كشاشات الهواتف الذكية سيكون عرض حقول البحث وغيرها من حقول النماذج قليلًا، وهذا يؤدي إلى اقتصاص النص البديل بطريقة غير مستحبة، ومن الأفضل عادةً تغيير هذا السلوك باستخدام الخاصية <code>[[CSS/text-overflow|text-overflow]]</code>:<syntaxhighlight lang="html">
<input placeholder="Enter something into this field, if you please!">

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
input:placeholder-shown {
  text-overflow: ellipsis;
}
</syntaxhighlight>

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|47.0
|51.0
|غير مدعومة
|34.0
|9.0
|}
==مصادر ومواصفات==
*مسودة [https://drafts.csswg.org/selectors-4/#placeholder Selectors Level 4].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
[[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]]