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 справа налево, но это не работает

Answer 1

Измените padding-left на padding-right в radioContainer классе.

А также измените left на right в .radioContainer .circle

Ваш окончательный 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%);
}