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

الموضوع قديم ونسي بالفعل ، كما اتضح.



لقد حصلت مؤخرًا على وظيفة قصيرة في تطوير المواصفات الفنية لتحديث مشروع قائم منذ فترة طويلة. وتتعلق القضية بشكل خاص بتصميم <input type = "checkbox"> سيء السمعة. اتضح أن المؤدي ، وهو مبرمج "من جميع المهن" لم يفهم حتى أنني كنت أشرح له بالكلمات كيفية القيام بذلك. اضطررت إلى تقديم أمثلة ، ونتيجة لذلك ظهر هذا النص.



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

لذا فإن الوضع

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



ذلك. يستخدمه المسوقون والمعلنون أيضًا. ما يفعله هذا النظام - بغض النظر عما يقوله - لا يهم.



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

شكاوى الموظفين

المخرج : على الشاشة الكبيرة ، يصعب رؤية "kryzhiki" ولا يمكن ملاحظته.

كبير المحاسبين : على جهاز الكمبيوتر الخاص بي ، يبدو "kryzhiki" على هذا النحو ، يبدو مختلفًا على الموظفين ، وفي المنزل أيضًا مختلف ، ولكنه مختلف تمامًا على الجهاز اللوحي.

المسوق : هل من الممكن أن تكون بعض المراكز غير المحددة باللون الأحمر والبعض الآخر المحدد باللون الأخضر؟

إلخ.

لذا فإن المهمة

1. إصلاح مظهر مربع الاختيار وصندوق الراديو بأقل تكلفة وأقل تغييرات.
2. جعل مربع الاختيار وتصميم مربع الراديو لمختلف المستخدمين. هام: هذا موقع مغلق ، هناك "كل ما يخصنا" ، "الجمال" ليس مطلوبًا ، لكن كفاءة الإدراك مطلوبة.

ما هو غير مسموح

1. يجب عدم لمس جانب الخادم.

2. لا يمكنك لمس ملفات جافا سكريبت ، ولا يمكنك إدراج جافا سكريبت الخاصة بك.

3. لا يمكن لمس ملفات css.

ما هو مسموح

1. تحرير قوالب html.

2. إنشاء ملف نمط لجميع المستخدمين.

4. إنشاء ملف نمط لمستخدم معين أو مجموعة من المستخدمين.

وما فعلته يمكنك الاطلاع على الفور على codepen.io ، لكن من الأفضل قراءة المزيد.

أظهرت دراسة أولية

1. تحتوي جميع <input type = "checkbox"> تقريبًا على حقل اسم ، وتلك التي لا تحتوي على معرف.

2. تحتوي جميع <input type = "radio"> على حقل اسم ، وبعضها يحتوي على معرف.

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



مقتطفات رمز المصدر:

/*  1 */
<tag><input type="checkbox">  </tag>

/*  2 */
<tag><input type="checkbox">  <br>
<input type="checkbox">  </tag>

/*  3 */
...<label><input type="checkbox">  </label>...

/*  4 */
<td><input id="idxxx" type="checkbox"></td>
<td><label for="idxxx"> </label></td>

لنصلح الكود:

/*  1 */
<tag><label class="new-input"><input type="checkbox"><s></s><span> </span></label></tag>

/*  2 */
<tag><label class="new-input"><input type="checkbox"><s></s><span> </span></label><br>...</tag>

/*  3 */
...<label class="new-input"><input type="checkbox"><s></s><span> </span></label>...

/*  4 */
<td><label class="new-input new-input-one"><input id="idxxx" type="checkbox"><s></s></label></td>
<td><label for="idxxx"> </label></td>

كل شيء هو نفسه بالنسبة لـ <input type = "radio"> ، فئة LABEL هي نفسها.

ماذا فعلت بالضبط؟

1. تم تغليف كل إدخال (مؤخرة الخيار 3) بعلامة LABEL مع فصلنا. الخيار 3 فقط إضافة فئة.
2. تم إدخال علامة S فارغة مباشرة بعد الإدخال. نظرًا لأن الإدخال نفسه لن يكون مرئيًا ، ستعرض هذه العلامة هذا الإدخال.
3. تم تغليف النص المصاحب بعلامة SPAN (باستثناء الخيار 4). ستكون هذه العلامة مطلوبة عندما نقرر مسألة محاذاة المدخلات المرئية بالنسبة لهذا النص.
4. تمت إضافة الخيار 4 فئة أخرى لتجنب هذه المحاذاة ، حيث أن النص المصاحب موجود في خلية أخرى من الجدول. بالمعنى الدقيق للكلمة ، سيكون من الضروري القيام بالعكس - إضافة فئة مسؤولة عن التوافق مع الخيارات 1-3. ولكن ، هناك الكثير من الخيارات 1-3 من الخيار الرابع ، ولكي لا يتم تضخيم html يتم القيام بذلك على هذا النحو.

بعض الاعتبارات الأولية وتعديلات css بخصوص تحجيم الصندوق: مربع الحدود ، تسوية LABEL ، محددات A + B ، A ~ B و [attr] ،: تم التحقق منها ،: معطل و :: قبل الفئات الزائفة. كل من ليس متأكدًا مما يعرفه أو يريد تحديث معرفته يبدو تحت القص.

لذا ، لنبدأ في تقديم المدخلات

مثال N 1. الأبسط - نستخدم الأحرف الأبجدية.

كود html هو نفسه ، وسيكون css على النحو التالي:

/* s1 */
.new-input > INPUT + S::before {
  content: "c";
}
/* s2 */
.new-input > INPUT:checked + S::before {
  content: "V";
}
/* s3 */
.new-input > INPUT[type="radio"] + S::before {
  content: "r";
}
/* s4 */
.new-input > INPUT[type="radio"]:checked + S::before {
  content: "X";
}
/* s5 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s6 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}
/* s7 */
.new-input > S::before {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  color: #fafafa;
  background-color: #37474f;
}
/* s8 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}

ستعرض علامة S الإدخال. لكننا "نقسمها" حسب الوظيفة: ستكون علامة S نفسها مسؤولة عن وضعها في LABEL والمحاذاة بالنسبة إلى SPAN التالي. وسيتم وضع



العنصر الزائف S :: before داخل علامة S وسيعمل كمدخل. يحدد



السطر s1 الحرف الذي سيتم وضعه في S :: قبل ذلك عندما لا يتم تحديد الإدخال. من حيث المبدأ ، سيكون من الضروري كتابة ".new-input> INPUT: not (: check) + S :: before" ، لكن بعض المتصفحات (على سبيل المثال ، IE) قد لا تنفذ مثل هذا البناء. تحدد

السلسلة s2 الحرف عند تحديد الإدخال.

يقوم الخطان s3 و s4 بنفس الشيء بالنسبة لراديو الإدخال.

سلسلة s5يصف ما يحدث إذا تم حظر الإدخال - في هذه الحالة ، ستكون علامة S نصف شفافة. يحدد

السطر s6 المحاذاة ، وفي هذه الحالة يعطي مساحة متروكة لليسار واليمين (فقط في هذا المثال). بالإضافة إلى أنه يزيل خط يتوسطه خط منتظم. يصنع

الخط s7 مربعًا ، بينما يحوله s8 إلى دائرة لإدخال الراديو.



يمكن الاطلاع على المثال رقم 1 في codepen.io . هناك مدخلات أصلية ومدخلات جديدة. يمكن إزالة السابق.







سؤال:



هل يمكنك استخدام رموز خاصة؟ مثل هذه:

□ ■ ▢ ▣ ○ ● ◎ ◉ امنحهم

الحجم المناسب وهذا كل شيء. لا؟



الجواب:



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

ذهبنا في الاتجاه الآخر. على الرغم من أن المثال الأخير يحتوي على تنفيذ لهذه الفكرة.



مثال N 2. "ارسم" عناصر الإدخال باستخدام css.



كود html هو نفسه ، لكن css سيكون مثل هذا:

/* s1 */
.new-input > S::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 1px solid currentColor;
  padding: 2px;
  background-clip: content-box;
  border-radius: 20%;
}
/* s2 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}
/* s3 */
.new-input > INPUT:checked + S::before {
  background-color: currentColor;
}
/* s4 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s5 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}

يحدد السطر s1 S :: قبل تقديم المدخلات. سيكون هذا كتلة مضمنة يتم تعيين عرضها وارتفاعها على 0.75em ، وهو ارتفاع تقريبًا للحرف الكبير ويعتمد على حجم خط الأصل. يتم تعيين حد رفيع باللون الحالي ، والحشو الداخلي ، والتقريب الصغير للزوايا. والأهم! - مقطع الخلفية الخاصية: تم تعيين مربع المحتوى. هذه خاصية مثيرة جدًا للاهتمام - إذا تم تعيين لون الخلفية ، فسيتم رسم جزء المحتوى فقط ولن يؤثر على الحشو. ماذا نحتاج. يجعل



الخط s2 لإدخال الراديو S :: قبل الجولة.

يحدد خط s3 للإدخال المحدد S :: قبل لون الخلفية إلى اللون الحالي. أي أنه "يرسم" مربعًا أو دائرة بداخله.

خطيفتح s4 الإدخال ، يعطي السطر s5 مساحة متروكة لليسار واليمين.



مزايا هذه الطريقة

1. كل شيء بسيط للغاية. يعمل على جميع المتصفحات. حتى IE10 (في محاكاة الحادي عشر).
2. يمكنك تلوين ما تريد.
3. نظرًا لأن S :: من قبل عبارة عن كتلة مضمنة ، فإنها تقع في الجزء السفلي من خط الأساس تمامًا ولا تخرج منه في أي مكان. إذا كان ارتفاعه أكبر من النص ، فسيؤدي ببساطة إلى زيادة ارتفاع السطر والبقاء على خط الأساس.
4. نظرًا لوجود تصور الإدخال داخل علامة S ، يمكن وضعه ومحاذاة بسهولة.
5. تتيح أبعاد S :: قبلها تعيين حجمها بالنسبة إلى حجم نص التسمية التوضيحية. يمكنك ، على سبيل المثال ، وضع حدود للارتفاع والعرض.

عيوب هذه الطريقة



بالأحجام em. الحقيقة هي أن الموقف قد ينشأ عندما يكون للعرض والارتفاع عند الحساب (من em إلى px) قيمة كسرية. قد لا يعمل التقريب بشكل صحيح على أجهزة الكمبيوتر العادية ذات الشاشة العادية. على سبيل المثال ، يمكن أن تصبح الأبعاد 12.8 بكسل × 12.8 بكسل في نفس Mozila 13 بكسل × 12 بكسل. ثم تحتاج إلى تحديد أحجام ثابتة. على الرغم من وجود الشاشات الحديثة وبطاقات الفيديو وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية والهواتف الذكية ، إلا أن هذا لا يحدث بسبب حقيقة أن نقطة (بكسل) المتصفح تتكون من عدة وحدات بكسل للشاشة.



يمكن الاطلاع على المثال رقم 2 في codepen.io . هناك مدخلات أصلية ومدخلات جديدة. يمكن إزالة السابق.

لذلك ، تم إنجاز المهمة الأولى - تقديم المدخلات. ننتقل إلى "التلوين" المحدد.

مدخلات التلوين

html على سبيل المثال:

<label class="new-input"><input name="chb1" type="checkbox" ...><s></s><span> </span></label>
<label class="new-input"><input id="rb1" type="radio" ...><s></s><span> </span></label>

سوف نشير إلى إدخال نوع مربع الاختيار بالاسم ، إلى الراديو بواسطة المعرف.



نحن نرسم كل شيء باللون الأزرق

/*  input */
.new-input > INPUT[name="chb1"] + S,
.new-input > INPUT#rb1 + S {
  color: #0091ea;
}
/*  text */
.new-input > INPUT[name="chb1"] ~ SPAN,
.new-input > INPUT#rb1 ~ SPAN {
  color: #0091ea;
}
/*   */
.new-input > INPUT[name="chb1"] ~ *,
.new-input > INPUT#rb1 ~ * {
  color: #0091ea;
}

تذكر الخصوصية في css ، هذه الأنماط ستكون أكثر تحديدًا من الأنماط الأساسية وستعمل بالتأكيد. كيف تختلف عن تلك المذكورة أعلاه؟ تلك التي تنطبق فقط على المدخلات المختارة - تلك التي لها الاسم المحدد وقيمة المعرف.



كل شيء على ما يرام هنا باستثناء أن المدخلات غير المحددة لن تبدو جيدة جدًا - الحد الأزرق الرفيع بالكاد يمكن ملاحظته.



لونها باللون الأخضر عند تحديد الإدخال

/*  input */
.new-input > INPUT[name="chb1"]:checked + S,
.new-input > INPUT#rb1:checked + S {
  color: #00c853;
}
/*  text */
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}
/*   */
.new-input > INPUT[name="chb1"]:checked ~ *,
.new-input > INPUT#rb1:checked ~ * {
  color: #00c853;
}

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

/*  input    */
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}

اللون باللون الأحمر عند عدم تحديد الإدخال

/*  input */
.new-input > INPUT[name="chb1"]:not(:checked) + S,
.new-input > INPUT#rb1:not(:checked) + S {
  color: #d50000;
}
/*  text */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
}
/*   */
.new-input > INPUT[name="chb1"]:not(:checked) ~ *,
.new-input > INPUT#rb1:not(:checked) ~ * {
  color: #d50000;
}

هل المنطق واضح؟ يمكنك الاستمرار في عمل تصميمات أكثر تعقيدًا.



على سبيل المثال ، إذا لم يتم تحديد الإدخال ، يجب أن يكون النص أحمر وغامقًا ، وإذا تم تحديد عنصر الإدخال الداخلي والنص ، فيجب أن يكون أخضر. ابتدائي!

/* ,    */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
/*   input,   */ 
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}
/* ,   */ 
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}

وعلى سبيل المثال ، تحتاج إلى معالجة مجموعة كاملة من المدخلات (10-15 قطعة). من أجل عدم كتابة مجموعة من السطور ، يمكنك العثور على الوالد المشترك (.parent_element) وتقصير الشرط.

.parent_element > .new-input > INPUT:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
.parent_element > .new-input > INPUT:checked + S::before {
  background-color: #00c853;
}
.parent_element > .new-input > INPUT:checked ~ SPAN {
  color: #00c853;
}

يمكنك رؤية كل شيء في المثال الأخير على codepen.io



هذا ، على ما يبدو ، وهذا كل شيء. يبقى فقط "خدش الوحمات" للكمال - مشاكل المحاذاة.

قم بمحاذاة الإدخال المرئي والنص المصاحب

بادئ ذي بدء ، اسمحوا لي أن أذكرك بأشياء معروفة حول وضع النص والتنسيق وغير ذلك. كل شيء تحت الخفض.





ماذا يحدث إذا تم عرض النص المصاحب في SPAN في سطرين أو ثلاثة؟ من الواضح أنه سوف "يتناسب" مع المدخلات. إنها ليست جميلة ، يجب إصلاحها.



إحدى الطرق القديمة هي: تعويم علامة S: يسار ، وعرض علامة SPAN: block and overflow: hidden.



سيؤدي هذا إلى إنشاء عمود من النص. من المفترض أن يكون لبعضهم هامش مناسب ، مما يؤدي إلى تخطي بينهم. حسنًا ، هناك أيضًا بواسير مضافة مع إنهاء الطفو بعد SPAN. سوف نسلك الطريق الحديث - استخدم flexbox. إنه في غير مكانه تمامًا هنا.

.new-input {
  display: flex;
  flex-direction: row;
  align-items: start;
}
.new-input > S {
  margin-right: 4px;
  flex: 0 0 auto;
}
.new-input > SPAN {
  flex: 0 1 auto;
}

في هذه الحالة ، ستكون علامة LABEL (وهي إدخال جديد) مرنة ، وستكون S و SPAN كتلتين ، وتوضعان في أعلى LABEL. سيكون النص في SPAN في عدة أسطر إذا لزم الأمر. لهذا السبب ، تم وصف المدخلات المرئية في S :: من قبل. بغض النظر عن الارتفاع ، سيتم محاذاة SPAN S :: من قبل مع خط SPAN الأول. بدلاً من ذلك ، يمكنك تحديد عناصر المحاذاة: الوسط - ثم باستخدام SPAN أحادي السطر ، سيكون الإدخال المرئي في الأعلى ، وبخطين ، في المنتصف ، وبثلاثة أسطر ، السطر الثاني. في المثال الأخير ، يمكنك تبديل موقع الإدخال.

هذا كل شئ

آمل أن تكون ممتعة ومفيدة لشخص ما. من فضلك لا تأنيبني كثيرًا - فهذه أول تجربة لي في هبر.



المثال رقم 1 هو مجرد عرض للتفاعل بين المدخلات المتغيرة والعنصر المجاور.



مثال N 2 - تصور المدخلات باستخدام css ، كأساس للحل.



المثال الأخير هو كل شيء موصوف معًا.

حول تنفيذ محدد

كانت هناك نماذج واسعة النطاق ، حيث تم تمييز كتل الحقول التي يمكن تحريرها بواسطة مستخدمين محددين بخلفية باهتة ، وكان باقي الإدخال يحتوي على خاصية معطلة ويتم تقديمها فقط للمعلومات. لذلك ، لم يتم تطبيق النمط ".new-input> INPUT: disabled + S :: before".

محدث

ردا على التعليقات مثال N 3 .

هناك دعم رئيسي وتركيز للمدخلات المخفية في العمل.