HTML CCS自定义广播按钮右至左

Question

我已经创建了自定义广播按钮我使用了W3School的代码自定义广播按钮W3SCHOOL但这不是正确的左右这是无线电的第一个圈子和下一个文字

.radioContainer{
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 22px;
    user-select: none;
    padding-left: 30px;
    direction: rtl;
}
.radioContainer input {
    display:none;
}
.radioContainer .circle{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #eee;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
}
.radioContainer:hover .circle{
    background-color: #ccc;
}
.radioContainer input:checked + .circle{
    background-color: #2196fc;
}
.radioContainer input:checked + .circle:after{
    content: "";
    width: 10px;
    height: 10px;
    background-color: white;
    position: absolute;
    border-radius: 50%;
    left:50%;
    top:50%; 
    transform: translate(-50%,-50%);
}

<label class="radioContainer">my text1
    <input type="radio" name="radio">
    <span class="circle"></span>
</label>
<br/>
<label class="radioContainer">my text2
    <input type="radio" name="radio">
    <span class="circle"></span>
</label>

我想更改标签的方向或将所有无线电按钮放在DIV和DIV的DIV方向上，但它不起作用

Answer 1

在radioContainer类中将padding-left更改为padding-right。

，也将left更改为.radioContainer .circle中的right

您的最终CSS必须这样：

.radioContainer{
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 22px;
    user-select: none;
    padding-right: 30px;
    direction: rtl;
}
.radioContainer input {
    display:none;
}
.radioContainer .circle{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #eee;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 50%;
}
.radioContainer:hover .circle{
    background-color: #ccc;
}
.radioContainer input:checked + .circle{
    background-color: #2196fc;
}
.radioContainer input:checked + .circle:after{
    content: "";
    width: 10px;
    height: 10px;
    background-color: white;
    position: absolute;
    border-radius: 50%;
    left:50%;
    top:50%; 
    transform: translate(-50%,-50%);
}