Ich habe zwei Funktypoptionen. Wenn ich eine Option auswähle, wird ein blauer Rand markiert. Das Problem ist, dass der Randeffekt verschwindet, wenn ich irgendwo anders klicke.
Ich möchte, dass der blaue Randeffekt überall dort erhalten bleibt, wo ich klicke, es sei denn, ich wechsle zu einer anderen Option.
Außerdem, wie kann ich den Preis in der „Spanne“ auf der rechten Seite eingeben und den Produktnamen auf der linken Seite behalten?
.checkbox-custom, .radio-custom { Deckkraft: 0; Position: absolut; } .checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label { Anzeige: Inline-Block; vertikal ausrichten: Mitte; Rand: 5px; Cursor: Zeiger; } .checkbox-custom-label, .radio-custom-label { Position: relativ; } .checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before { Inhalt: ''; Hintergrund: #fff; Rand: 2px fest #000; Anzeige: Inline-Block; vertikal ausrichten: Mitte; Breite: 20px; Höhe: 20px; Polsterung: 2px; Rand rechts: 10px; Textausrichtung: Mitte; } .checkbox-custom:checked + .checkbox-custom-label:before { Hintergrund: Rebeccapurple; Box-Shadow: Einschub 0px 0px 0px 4px #fff; } .radio-custom + .radio-custom-label:before { Randradius: 50 %; Rand: 10px; } .radio-custom:checked + .radio-custom-label:before { Hintergrund: #000; Box-Shadow: Einschub 0px 0px 0px 4px #fff; } .checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label { Umriss: 1 Pixel durchgehend blau; Breite: 50 %; } .radio-custom-label { Hintergrund: #f4f4f4; Breite: 50 %; } 
您已将蓝色边框的代码放入单选按钮的 :focus 中，您只需将该代码添加到单选按钮的 :checked 中即可。
.radio-custom:checked + .radio-custom-label{ outline: 1px solid blue; }