تنسيق أزرار الراديو والتسميات باستخدام CSS

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

فهم المشكلة

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

التخطيط: وضع أزرار الراديو بجانب التسميات

للبدء، نحتاج إلى تحديد كيف تريد أن تظهر أزرار الراديو بجانب تسمياتها:

• تخطيط متصل: تظهر أزرار الراديو والتسميات على نفس السطر.
• تخطيط عمودي: تتراصف أزرار الراديو والتسميات عموديًا.

إليك طريقتان لتحقيق هذه التخطيطات:

الطريقة 1: استخدام عناصر متصلة مع هوامش

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

<style type='text/css'>
    .input input {
        width: 20px; /* حجم زر الراديو */
        margin-right: 10px; /* المسافة بين الزر والتسمية */
    }
</style>

الطريقة 2: استخدام فواصل الأسطر

إذا كنت تفضل أن يظهر كل خيار على سطر خاص به، فما عليك سوى إدراج علامات <br /> لكسر السطر. إليك مثال على كيفية ظهور ذلك:

<div class="input radio">
    <fieldset>
        <legend>ما لون السماء؟</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
        
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
        <label for="SubmitQuestion1">أخضر متلألئ غريب.</label><br />
        
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
        <label for="SubmitQuestion2">برتقالي غامق كئيب</label><br />
        
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
        <label for="SubmitQuestion3">أزرق متلألئ مثالي</label>
    </fieldset>
</div>

تمييز التسمية المحددة

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

الخطوة 1: CSS أساسي لتنسيق التركيز

للبدء، سترغب في إضافة بعض CSS للتسمية التي في وضع التركيز. سيوضح ذلك بصريًا أي خيار تم اختياره:

<style type='text/css'>
    .input label.focused {
        background-color: #EEEEEE; /* خلفية للتسمية المحددة */
        font-style: italic; /* تغيير نمط الخط للتأكيد */
    }
</style>

الخطوة 2: JavaScript لإدارة التركيز

التالي، ستحتاج إلى بعض JavaScript للتعامل مع إضافة وإزالة فصل التركيز. استخدام مكتبة مثل jQuery يجعل ذلك أسهل بكثير:

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('.input :radio').focus(updateSelectedStyle);
        $('.input :radio').blur(updateSelectedStyle);
        $('.input :radio').change(updateSelectedStyle);
    });

    function updateSelectedStyle() {
        $('.input :radio').removeClass('focused').next().removeClass('focused');
        $('.input :radio:checked').addClass('focused').next().addClass('focused');
    }
</script>

الملخص

لتلخيص، إليك كيف يمكنك بشكل فعال تنسيق أزرار الراديو والتسميات:

1. التخطيط: استخدم هوامش CSS للتخطيط المتصل أو علامات <br /> للتكديس العمودي.
2. التسليط: استخدم CSS لتنسيق أساسي وJavaScript لتحديث الأنماط ديناميكيًا بناءً على زر الراديو المحدد.

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