我有一个自定义复选框,我添加了一个文本,我希望文本对齐复选框的右侧,
这是jsfiddle:qazxsw poi
这是HTML
https://jsfiddle.net/Mwanitete/ewpo0h1g/1/
这里是css
<div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" >
<label for="checkOther">Testing Check-Box</label>
</div>
我的代码中缺少什么?任何建议都会有所帮助谢谢
将文本移动到标签字段之外,如下所示。
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
margin: 10px
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
.label-text {
position: relative;
left: 10px;
}
<label for="checkOther"></label>Testing check-box
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
margin: 10px
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
.label-text {
position: relative;
left: 10px;
}
解决方案2:您正在使用 <div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" >
<label for="checkOther"></label>Testing check-box
</div>
为复选框应用样式,但同样也适用于标签。因此,使用.squaredThree label:after
属性为复选框标签应用样式,如下所示。但在这种情况下,我们在这里给出了标签值。
before
.squaredThree label:before {
content: 'Testing check-box';
position: absolute;
top: 4px;
left: 30px;
white-space:nowrap;
background: transparent;
}
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
margin: 10px
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
.label-text {
position: relative;
left: 10px;
}
.squaredThree label:before {
content: 'Testing check-box';
position: absolute;
top: 4px;
left: 30px;
white-space:nowrap;
background: transparent;
}
你已经限制了 <div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" >
<label for="checkOther"></label>
</div>
的宽度,删除.squaredThree label
或增加它。还要添加width: 20px
:
padding-left
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
margin: 10px
}
.squaredThree label {
width: 130px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
padding-left: 20px;
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
.label-text {
position: relative;
left: 10px;
}