Kekalkan kesan sempadan butang radio apabila dipilih

Question

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%;
}

<div>
  <input id="pA" value="{{ pago_normal }}" class="radio-custom" name="radio-group" type="radio">
  <label for="pA" class="radio-custom-label">
    ProdukA <span>$100</span>
  </label>
</div>
<div>
  <input id="pB" value="{{ pago_cuotas }}" class="radio-custom" name="radio-group" type="radio">
  <label for="pB" class="radio-custom-label">
    ProdukB <span>$200</span>
  </label>
</div>

Answer 1

Anda sudah meletakkan kod untuk sempadan biru ke dalam :fokus butang radio, anda hanya perlu menambah kod itu pada :ditanda butang radio.

.radio-custom:checked + .radio-custom-label{
      outline: 1px solid blue;
    }

.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;
        }
    </style>

 <div>
    <input id="pA" value="{{ pago_normal  }}" class="radio-custom" name="radio-group" type="radio">
    <label for="pA" class="radio-custom-label">ProductA
    <span>0</span>
    </label>
</div>
<div>
    <input id="pB" value="{{ pago_cuotas }}" class="radio-custom" name="radio-group" type="radio">
    <label for="pB" class="radio-custom-label">ProductB
    <span>0</span>
    </label>
</div>