Html 询问在复选框旁边添加文本

此框用于过滤页面上的内容。我从一个网站下载了这个复选框，并试图在旁边添加一个文本，但我不能。文本始终显示在复选框的相同位置

       <div class="roundedOne">

                        <input class="swiftfilter" type="checkbox" data-container=".isotope-filter" data-search-in=".grid_6" value="france" data-child=".titledayarchivetour p" data-child-only="true" id="roundedOne" name="check" /> 
                        <label for="roundedOne">CHOOSE FRANCE</label> 


    </div>

.roundedOne {
    width: 28px;
    height: 28px;
    background: #fcfff4;
    float: left;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    margin: 20px auto;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
}

.roundedOne label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    left: 4px;
    top: 4px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
    background: -o-linear-gradient(top, #222 0%, #45484d 100%);
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
    background: linear-gradient(top, #222 0%, #45484d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedOne label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #00bf00;

    background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: linear-gradient(top, #00bf00 0%, #009400 100%);

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    top: 2px;
    left: 2px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.roundedOne label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.roundedOne input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

选择法国
roundedOne先生{
宽度：28px；
高度：28px；
背景#fcfff4；
浮动：左；
背景：-webkit线性梯度（顶部，#fcfff4 0%，#dfe5d7 40%，#B3 100%）；
背景：-莫兹线性梯度（顶部，#fcfff4 0%，#dfe5d7 40%，#B3 100%）；
背景：-o-线性梯度（顶部，#fcfff4 0%，#dfe5d7 40%，#B3 100%）；
背景：-ms线性梯度（顶部，#fcfff4 0%，#dfe5d7 40%，#B3 100%）；
背景：线性梯度（顶部，#fcfff4 0%，#dfe5d7 40%，#B3 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#fcfff4'，endColorstr='#b3bead'，GradientType=0）；
保证金：20px自动；
-webkit边界半径：50px；
-moz边界半径：50px；
边界半径：50px；
-webkit盒阴影：嵌入0px 1px 1px白色，0px 1px 3px rgba（0,0,0,0.5）；
-moz盒阴影：嵌入0px 1px 1px白色，0px 1px 3px rgba（0,0,0,0.5）；
盒影：镶嵌0px 1px 1px白色，0px 1px 3px rgba（0,0,0,0.5）；
位置：相对位置；
}
.roundedOne标签{
光标：指针；
位置：绝对位置；
宽度：20px；
高度：20px；
-webkit边界半径：50px；
-moz边界半径：50px；
边界半径：50px；
左：4px；
顶部：4px；
-webkit盒阴影：插入0px 1px 1px rgba（0,0,0,0.5），0px 1px 0px rgba（255255,1）；
-moz盒阴影：嵌入0px 1px 1px rgba（0,0,0,0.5），0px 1px 0px rgba（255255,1）；
盒影：嵌入0px 1px rgba（0,0,0,0.5），0px 1px 0px rgba（255255,1）；
背景：-webkit线性梯度（顶部，#222 0%，#45484d 100%）；
背景：-莫兹线性梯度（顶部，#2220%，#45484d 100%）；
背景：-o-线性梯度（顶部，#2220%，#45484d 100%）；
背景：-ms线性梯度（顶部，#2220%，#45484d 100%）；
背景：线性梯度（顶部，#2220%，#45484d 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#222'，endColorstr='#45484d'，GradientType=0）；
}
.roundedOne标签：在{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
内容：''；
位置：绝对位置；
宽度：16px；
高度：16px；
背景：#00bf00；
背景：-webkit线性梯度（顶部，#00bf00 0%，#009400 100%）；
背景：-莫兹线性梯度（顶部，#00bf00 0%，#009400 100%）；
背景：-o-线性梯度（顶部，#00bf00 0%，#009400 100%）；
背景：-ms线性梯度（顶部，#00bf00 0%，#009400 100%）；
背景：线性梯度（顶部，#00bf00 0%，#009400 100%）；
-webkit边界半径：50px；
-moz边界半径：50px；
边界半径：50px；
顶部：2个；
左：2px；
-webkit盒阴影：嵌入0px 1px 1px白色，0px 1px 3px rgba（0,0,0,0.5）；
-moz盒阴影：嵌入0px 1px 1px白色，0px 1px 3px rgba（0,0,0,0.5）；
盒影：镶嵌0px 1px 1px白色，0px 1px 3px rgba（0,0,0,0.5）；
}
.roundedOne标签：悬停：：之后{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=30）”；
过滤器：α（不透明度=30）；
不透明度：0.3；
}
.roundedOne输入[类型=复选框]：选中+标签：之后{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：α（不透明度=100）；
不透明度：1；
}

---

您必须从

中删除
宽度
。舍入一个
元素和
位置：绝对来自
标签

@kkat这有帮助吗？@kkat你想成为什么样的人？我想成为“选择法国”这样的人。你能发布一张显示你渴望的情况的图片吗？嘿！那好多了！我甚至比圆圈复选框更喜欢它。非常感谢D