خاصية appearance
آخر تحديث: 2026-09-13
appearance خاصية appearance
تتحكم الخاصية appearance فيما إذا كان العنصر يستخدم المظهر الأصلي للمتصفح — العرض الافتراضي لعناصر التحكم في النموذج. وعند ضبطها على none، يتخلى العنصر عن مظهره الأصلي ويصبح أسلوبه خاضعًا بالكامل لـ CSS، مما يجعلها خاصية أساسية لتخصيص عناصر التحكم في النموذج.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
appearance: none | auto;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | auto | كلمة مفتاحية | المظهر الأصلي |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| appearance | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تُستخدم appearance: none عادةً لتخصيص عناصر التحكم في النموذج مثل <select>، و <input type="checkbox">، و <input type="radio">.
تحذير： وللتوافق، استخدم أيضًا بادئتي -webkit-appearance و -moz-appearance؛ إذ يختلف دعم المتصفحات لـ appearance قليلًا.
❓ الأسئلة الشائعة
Qما الأنماط الأصلية التي يزيلها appearance: none من عناصر التحكم؟
Aتزيل المظهر الأصلي الذي تضيفه المتصفحات إلى عناصر التحكم في النموذج: سهم القائمة المنسدلة في select، وأنماط التحديد الافتراضية في checkbox/radio، ومسار شريط التمرير range، وزر المسح في حقول البحث، وأزرار الزيادة في حقول الأرقام. وبعد الإزالة يُصفَّر مظهر العنصر ويتولى CSS السيطرة بالكامل، لكن الوظيفة تبقى — فالنقر والتحديد والإرسال ما زالت تعمل.
Qهل يمكن للخاصية appearance استعادة المظهر الافتراضي لعنصر التحكم؟
Aنعم — يستعيد appearance: auto العرض الأصلي للمتصفح. لكن المتصفحات المختلفة تستعيد بدرجات متفاوتة قليلًا، وإذا كنت قد خصصت العنصر بكثافة باستخدام none من قبل، فقد تبقى بعض التناقضات الدقيقة بعد الاستعادة. ويوصى بالاكتفاء بالقيمتين auto و none.
Qاختفت سهم select بعد appearance: none — كيف أضيف سهمًا مخصصًا؟
Aعوّضها بصورة خلفية: بعد أن يزيل appearance: none السهم الأصلي، اضبط background: #fff url('arrow.svg') no-repeat right 12px center؛ وأضف padding-right إلى select لإفساح مساحة للسهم. وهذا النمط الكلاسيكي للقوائم المنسدلة المخصصة — فقط حافظ على منطقة نقر كبيرة بما يكفي.
Qهل أحتاج إلى كتابة كل من appearance وبادئة -webkit-appearance؟
Aنعم، يُوصى بذلك. تغطي -webkit-appearance متصفحات Safari و Chromium الأقدم، وتغطي -moz-appearance متصفح Firefox، أما appearance القياسية فهي للمتصفحات الأحدث. ولا يزال Firefox يتطلب -moz-appearance: none ليُطبَّق على خانات الاختيار، لذا فإن كتابة الثلاثة هي الأكثر أمانًا.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
