Kekalkan kesan sempadan butang radio apabila dipilih-Soal Jawab Rangkaian PHP Cina

Saya mempunyai dua pilihan jenis radio. Apabila saya memilih pilihan, sempadan biru ditandakan. Masalahnya, jika saya klik di tempat lain, kesan sempadan hilang.

Saya mahu kesan sempadan biru kekal di mana-mana sahaja saya klik melainkan saya beralih kepada pilihan lain.

Selain itu, bagaimanakah saya boleh meletakkan harga dalam "span" di sebelah kanan dan mengekalkan nama produk di sebelah kiri?

.checkbox-custom, .radio-custom { kelegapan: 0; jawatan: mutlak; } .kotak semak tersuai, .checkbox-label-khusus, .radio-custom, .radio-custom-label { paparan: inline-block; vertical-align: tengah; jidar: 5px; kursor: penunjuk; } .checkbox-label-khusus, .radio-custom-label { kedudukan: relatif; } .checkbox-custom + .checkbox-custom-label:sebelum ini, .radio-custom + .radio-custom-label:sebelum { kandungan: ''; latar belakang: #fff; sempadan: 2px pepejal #000; paparan: inline-block; vertical-align: tengah; lebar: 20px; ketinggian: 20px; padding: 2px; jidar kanan: 10px; text-align: tengah; } .checkbox-custom:checked + .checkbox-custom-label:sebelum { latar belakang: rebeccapurple; bayang-kotak: masukkan 0px 0px 0px 4px #fff; } .radio-custom + .radio-custom-label:sebelum { jejari sempadan: 50%; jidar: 10px; } .radio-custom:checked + .radio-custom-label:sebelum { latar belakang: #000; bayang-kotak: masukkan 0px 0px 0px 4px #fff; } .checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label { garis besar: 1px biru pepejal; lebar: 50%; } .radio-custom-label { latar belakang: #f4f4f4; lebar: 50%; }

   ProdukA $100  
    ProdukB $200

.checkbox-custom, .radio-custom { opacity: 0; position: absolute; } .checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label { display: inline-block; vertical-align: middle; margin: 5px; cursor: pointer; } .checkbox-custom-label, .radio-custom-label { position: relative; display: flex; align-items: center; padding-right: 10px; } .checkbox-custom-label span, .radio-custom-label span{ margin-left: auto; } .checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before { content: ''; background: #fff; border: 2px solid #000; display: inline-block; vertical-align: middle; width: 20px; height: 20px; padding: 2px; margin-right: 10px; text-align: center; } .checkbox-custom:checked + .checkbox-custom-label:before { background: rebeccapurple; box-shadow: inset 0px 0px 0px 4px #fff; } .radio-custom + .radio-custom-label:before { border-radius: 50%; margin: 10px; } .radio-custom:checked + .radio-custom-label:before { background: #000; box-shadow: inset 0px 0px 0px 4px #fff; } .checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label { /* outline: 1px solid blue; */ /* width:50%; */ } .radio-custom-label{ background: #f4f4f4; /* width: 50%; */ } .radio-custom:checked + .radio-custom-label{ outline: 1px solid blue; }