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

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

ساعِد المستخدمين في تحديد خيار.

العنصر <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>. سيؤدي ذلك إلى منع تكبير/تصغير الصفحة في متصفّح iOS Safari عندما يكون عنصر التحكّم في النموذج مركّزًا.

يمكنك بالطبع أيضًا تغيير ألوان العناصر لتتناسب مع ألوان علامتك التجارية. وبعد إضافة المزيد من الأنماط للتباعد و: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 والسمة background في CSS أو صور 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>
• تسهيل استخدام عناصر تحكُّم النماذج ذات الأنماط
• فتح واجهة المستخدم