在此先感谢您的帮助。

所以我有自定义复选框输入。当您单击标签或输入时,div的边框和标签文本会更改颜色,并出现对勾。

唯一的问题是,无论复选框处于什么状态,我都需要选中以使其左对齐,而文本保持居中(当前,选中复选框时,标签会跳到右侧)。知道如何将复选框移到左侧并使文本居中并固定吗?

这是我的代码:

CSS:

div.label {
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}

label {
display:inline;
text-align:center;
}

input[type=checkbox] {
display: none;
}

input:checked + div {
border: solid 1px red;
color: #F00;
}

input:checked + div:before {
content: "\2713";
}


HTML:

<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
<label for="lists[Travel]">Travel</label><br>
</div>

最佳答案

将绝对位置添加到input:checked + div:before ...之前,像这样:

input:checked + div:before {
content: "\2713";
position: absolute;
margin-left: -50px;
}

关于css - Div内的左对齐自定义复选框和中心文本(输入+ Div),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25254486/

10-12 00:33
查看更多