10 مقتطفات مجانية من CSS و JavaScript Select Box Snippets

لقد خدمتنا مربعات تحديد HTML الافتراضية جيدًا لعقود. لكن في العصر الحديث ، من العدل أن نقول إنها قديمة بعض الشيء.

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

لقد قمت برعاية مجموعة من أفضل 10 اختيارات لأنماط مربعات التحديد المصنوعة يدويًا. لم يتم إصدارها كمكونات إضافية ولكنها تعتمد بدلاً من ذلك على قوالب لتخصيص JavaScript و CSS. لكنها كلها سهلة الإعداد وحتى إعادة تصميمها لأغراضك الخاصة.

1. قائمة تحديد مخصصة

بدأت المجموعة هي أنماط قائمة التحديد المخصصة من Wallace Erick.

يستخدم كلاً من CSS لإعادة التصميم وجافا سكريبت لتكوين UX للقوائم. إنها تتصرف بشكل مختلف قليلاً عن اختيارات HTML القياسية ، وأعتقد أنها أجمل قليلاً في الاستخدام.

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

مكان ممتاز للبدء إذا كنت تريد فقط قوائم مختارة نظيفة وجديدة المظهر تعمل.

2. تحديد بسيط

إليك مربع اختيار بسيط للغاية يهدف إلى الاندماج بشكل طبيعي في كل تخطيط.

يعتمد هذا على ألوان أكثر دقة مع نظام ألوان أبيض وأسود عادي. ولكنه يستخدم أيضًا JavaScript لتحريك قائمة التحديد داخل وخارج العرض.

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

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

3. قوائم HTML المنسدلة غير السافرة

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

من الواضح أنه يمكنك إزالة هذه الميزة في تخطيطك الخاص والالتزام بنظام واحد يعمل لموقعك. لكن بشكل عام ، تعمل هذه القوائم المحددة تمامًا مثل القائمة العادية ، وهي رائعة للاستخدام.

إذا كنت قلقًا بشأن التوافق ، ففكر في العمل مع هذا القالب.

معظم التغييرات تجميلية لذا لا يجب أن تؤثر كثيرًا على سلوك المستخدم.

4. تحديد العنصر النائب

التصميم الفعلي لقائمة تحديد العنصر النائب هذا رائع ، لكن التصميم ليس العامل الوحيد هنا.

أنشأ المطور James Nowland هذه القائمة بهدف إزالة الإعداد الافتراضي من اختيار التحديد. هذا يعني أنه يتصرف مثل عنصر نائب في حقول النص حيث تراه عندما يكون الحقل فارغًا ، ولكن بمجرد تعيين قيمة فإنه يختفي.

إنه متوافق تمامًا ويعمل مع عنصر تحديد HTML الفعلي. يتم إخفاء حقل الخيار افتراضيًا عندما يختار المستخدم خيارًا. بهذه الطريقة لن ترى أبدًا نص "تحديد خيار" في أي مكان في القائمة المنسدلة. حل مبدع حقا!

5. تصميم مسطح

غالبًا ما تكون الجماليات مهمة في تصميم الويب وتعد قائمة التحديد المسطحة هذه مثالاً رائعًا.

لا يزال يعمل تمامًا مثل التحديد النموذجي ولم يتم تغيير جزء القائمة المنسدلة على الإطلاق. ولكن مجرد إعادة تصفيف التحديد نفسه يضفي الحيوية على الصفحة. إنه يبدو أكثر أناقة من المتصفح الافتراضي القبيح.

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

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

6. نقي CSS

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

أحد الأشياء المفضلة لدي هو هذا المقتطف الذي لا يعرض قوائم تحديد CSS فقط ، ولكن أجهزة الراديو ومربعات الاختيار أيضًا.

كلهم يبدون مذهلين ويجب أن يندمجوا في أي نوع من التخطيط. لديك سيطرة كاملة لإجراء تعديلات في CSS ، وأفضل ما في الأمر هو أن يعمل في جميع المتصفحات الرئيسية أيضًا.

7. تصميم القوائم المنسدلة التي يمكن الوصول إليها

إليك أحد الأمثلة الأكثر أسلوبًا لما يمكنك فعله بقوائم محددة. يعتمد هذا المقتطف الذي أنشأه Andy Fitzsimon على JavaScript لتأثير القائمة المنسدلة ويستخدم CSS مخصصًا للتدرجات وأيقونات الأسهم.

ما هو لطيف أن هذه القائمة تدعم أيضًا ميزة no-JS ، لذا ستعمل حتى إذا تم تعطيل JavaScript. يطلق عليه التدهور اللطيف وهو أفضل صديق لمطور الويب لإمكانية الوصول.

لا تزال هذه القوائم المختارة تدير تدرجات الويب 2.0 الخاصة بالمدرسة القديمة والتي قد لا تتناسب مع التصميم لعام 2017 وما بعده.

ولكن هذا يوضح أنه يمكنك أخذ قوائم مختارة في أي مكان تريد بقليل من الإبداع. ويمكن أن تعمل هذه الأشياء بشكل جيد بشكل مدهش إذا اخترقت طريقك عبر CSS لتخصيصها قليلاً.

8. قائمة أيقونة SVG

تحتوي قوائم التحديد الافتراضية على رمز السهم إلى الجانب وليس أكثر من ذلك. باستخدام القليل من سحر SVG ، يمكنك تحويل هذا إلى أي رمز آخر تفضله.

تحتوي هذه القائمة المخصصة على تصميم رمز زائد خاص بها يعمل بملف SVG خالص. عند النقر لتوسيع القائمة ، سيتم تحريكها إلى رمز X للإغلاق / الإخفاء.

لم أرَ شيئًا كهذا من قبل ويظهر إلى أي مدى وصلنا إلى دفع حدود متصفحات الويب.

لسوء الحظ ، لا يعمل هذا على عنصر تحديد HTML الأصلي. إنها مجموعة من عناصر القائمة داخل div لذا ستحتاج إلى استهداف حقل إدخال مخفي كلما تم تحديد قيمة.

لحسن الحظ ، هذه العملية سهلة للغاية ، لذا إذا كنت تريد هذا التصميم على موقعك ، فلن يستغرق الأمر الكثير من العمل لبدء تنفيذه.

9. حدد Box Experiment

هذا تصميم تجريبي لفت انتباهي حقًا. تُظهر شاشة العرض التوضيحي للمقارنة مدى اختلاف ذلك عن قوائم التحديد المنتظمة وكيف يغير تجربة المستخدم.

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

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

10. اختيار الظلام والضوء

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

كلاهما يعتمد على تدرجات CSS للخلفيات ويمزج القوائم المنسدلة مع اللون السفلي للتدرج. لا يستخدم هذا أي مكون إضافي لجافا سكريبت حتى تتمكن من تحقيق ذلك بقليل من CSS وبعض الجهد الإبداعي.

لاحظ أن CSS نفسه معقد جدًا ، لذا من المفيد أن تعرف طريقك حول اللغة. ولكن بالنسبة لنقطة البداية ، يعد هذا أحد أفضل الخيارات التي ستجدها ، كما أنه يترك مجالًا كبيرًا للتخصيص أيضًا.