Html Css Radio Button Styles

การจัดรูปแบบ Radio Buttons และ Labels ด้วย 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>

สรุป

เพื่อสรุป นี่คือวิธีที่คุณสามารถจัดรูปแบบปุ่มวิทยุและป้ายกำกับได้อย่างมีประสิทธิภาพ:

การจัดตำแหน่ง: ใช้ CSS มาร์จินสำหรับเลย์เอาต์แบบแถวเดียว หรือแท็ก <br /> สำหรับการซ้อนในแนวตั้ง
การเน้น: ใช้ CSS สำหรับการจัดรูปแบบพื้นฐานและ JavaScript เพื่ออัปเดตสไตล์แบบไดนามิกตามปุ่มวิทยุที่เลือก

ด้วยเทคนิคเหล่านี้ คุณสามารถปรับปรุงประสบการณ์ของผู้ใช้ในแบบฟอร์มของคุณในขณะที่รักษารูปลักษณ์ที่สะอาดและทันสมัย สุขสันต์การเขียนโค้ด!