عناصر التحكّم في تصميم النماذج

ستتعلم في هذه الوحدة طريقة تصميم عناصر التحكم في النماذج وكيفية مطابقة أنماط المواقع الأخرى.

مساعدة المستخدمين على تحديد خيار

العنصر <select>

لا تبدو الأنماط التلقائية لعنصر <select> رائعة، كما أنّ المظهر غير متّسق بين المتصفّحات.

أولاً، لنغير الأسهم.

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

لإزالة الأسهم التلقائية لعنصر <select>، اتّبِع الخطوات التالية: استخدِم سمة CSS appearance. لإظهار السهم الذي تختاره، حدِّد السهم على أنّه background.

عليك أيضًا تغيير font-size إلى 1rem على الأقل. (والتي تكون القيمة التلقائية لها 16 بكسل في معظم المتصفّحات) للعنصر <select>. سيؤدي ذلك إلى منع تكبير/تصغير الصفحة على Safari في نظام iOS عند التركيز على عنصر التحكّم في النموذج.

يمكنك، بالطبع، أيضًا تغيير ألوان العناصر لتتناسب مع ألوان علامتك التجارية. بعد إضافة المزيد من الأنماط للمسافات، و:hover و:focus، أصبح مظهر العنصر <select> متسقًا بين المتصفحات.

شاهد هذا في العرض التوضيحي التالي من الإبداع في عام 2019

ماذا عن العنصر <option>؟ العنصر <option> هو ما يسمى العنصر الذي تم استبداله إذا كان تمثيله خارج نطاق CSS. بدءًا من هذه الكتابة، لا يمكنك تصميم نمط العنصر <option>.

مربّعات الاختيار وأزرار الاختيار

يختلف مظهر <input type="checkbox"> و<input type="radio"> باختلاف المتصفحات.

افتح العرض التوضيحي في المتصفّحات المختلفة لمعرفة الفرق. لنتعرف على كيفية التأكد من أن مربعات الاختيار وأزرار الاختيار تطابق علامتك التجارية وتبدو بنفس تأثير المتصفح عبر المتصفح.

في السابق، لم يكن بإمكان المطوّرين تصميم نمط لعناصر التحكّم <input type="checkbox"> و<input type="radio"> مباشرةً. يمكن الآن تصميم مربّعات الاختيار وأزرار الاختيار من خلال العناصر الزائفة الخاصة بها. أو يمكن استخدام أسلوب الاستبدال التالي لإنشاء أنماط مخصصة لهذه العناصر.

أولاً، قم بإخفاء مربع الاختيار الافتراضي وزر الاختيار بشكل مرئي.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

من المهم استخدام السمة position: absolute مع opacity: 0 بدلاً من display: none أو visibility: hidden. بحيث تكون عناصر التحكم مخفية بصريًا فقط. سيضمن ذلك استمرار ظهور تلك الرسائل من خلال متصفّح شجرة تسهيل الاستخدام ملاحظة: قد يلزم مزيد من التصميم لضمان اختفاء العناصر المرئية تظل عناصر التحكم في النموذج "في الأعلى" من العناصر البديلة الخاصة بها. وسيساعد ذلك في ضمان تمرير مؤشر الماوس فوق أحد هذه العناصر، عندما يكون قارئ الشاشة قيد التشغيل، أو عند استخدام أجهزة اللمس مع تمكين برامج قراءة الشاشة، فإن عناصر التحكم المخفية مرئيًا أن تكون قابلة للاكتشاف إذا كنت تستكشفها باللمس، وسيظهر مؤشر التركيز المرئي لقارئ الشاشة بشكل عام في مكان عناصر التحكّم على الشاشة.

لعرض مربعات الاختيار المخصصة وأزرار الاختيار، تتوفر لك خيارات مختلفة. يمكنك استخدام عنصر CSS الزائف ::before وسمة CSS background أو صور SVG مضمَّنة.

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

هناك الكثير من الاحتمالات مع CSS لضمان تطابق مربّعات الاختيار وأزرار الاختيار مع أنماط علامتك التجارية.

مزيد من المعلومات حول تصميم "<input type="checkbox">" و"<input type="radio">" وأنماط مربّعات الاختيار المخصصة.

كيفية استخدام ألوان موقعك الإلكتروني لعناصر التحكّم في النماذج

هل تريد استخدام أنماط موقعك الإلكتروني لتكوين عناصر تحكّم باستخدام سطر واحد من الرموز؟ يمكنك استخدام سمة CSS accent-color لتحقيق ذلك.

checkbox {
  accent-color: orange;
}

التحقق من فهمك

اختبر معلوماتك حول تصميم عناصر التحكم في النماذج

الموارد

• لون التمييز
• تغيير تصميم العنصر <select>
• تسهيل استخدام عناصر التحكّم في النماذج ذات الأنماط المفضّلة
• فتح واجهة المستخدم