css 当单选按钮被选中时，保持它的边框效果

mlmc2os5 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(161)

我有两个收音机类型的选择。当我选择一个选项时，会标记一个蓝色边框。问题是，如果我点击其他地方，边框效果就会消失。
我希望无论单击何处，蓝色边框效果都保持不变，除非切换到其他选项。
还有，我怎么能把价格是在“跨度”的权利，并保持产品的名称在左边？

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

<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>

css

来源：https://stackoverflow.com/questions/76186825/keep-the-border-effect-of-a-radio-button-when-it-is-selected

1条答案

按热度按时间

yhived7q1#

您已经将蓝色边框的代码放在单选按钮的：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>$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>

赞(0）回复(0）举报 2023-05-08

我来回答

css 当单选按钮被选中时，保持它的边框效果

1条答案

相关问题

热门标签

最新问答