Html css自定义单选按钮从右到左答案

【问题标题】：Html ccs custom radio button right to leftHtml css自定义单选按钮从右到左
【发布时间】：2019-08-03 00:47:23
【问题描述】：

我已经创建了从右到左的自定义单选按钮我使用了 w3school 的代码 custom radio button 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 的方向，但它不起作用

【问题讨论】：

标签： html css radio-button

【解决方案1】：

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

同时将.radioContainer .circle中的left更改为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%);
}

【讨论】：