選擇單選按鈕時保留其邊框效果
P粉769045426
P粉769045426 2023-09-03 21:25:38
0
1
513
<p>我有兩個無線電類型選項。當我選擇一個選項時,會標記藍色邊框。問題是,如果我點擊其他地方,邊框效果就會消失。 </p> <p>我希望無論我點擊哪裡,藍色邊框效果都會保留,除非我切換到其他選項。 </p> <p>另外,我怎麼能將「跨度」中的價格放在右側,並將產品名稱保留在左側? </p> <p> <pre class="brush:css;toolbar:false;">.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; } .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%; }</pre> <pre class="brush:html;toolbar:false;"><div> <input id="pA" value="{{ pago_normal }}" class="radio-custom" name="radio-group" type="radio"> <label for="pA" class="radio-custom-label"> ProductA <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"> ProductB <span>$200</span> </label> </div></pre> </p>
P粉769045426
P粉769045426

全部回覆(1)
P粉744831602

您已將藍色邊框的程式碼放入單選按鈕的 :focus 中,您只需將程式碼新增至單選按鈕的 :checked 即可。

.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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!