我正在绑定我的复选框右侧的文本。目前文本出现在多行中。对齐自定义复选框问题css

我试图改变宽度，并赋予它一个固定的宽度：

.checkbox span.custom { 
    margin-left: 34px; 
    display: inline-block; 
    width: 100px; // MY TRY 
}

，但它正在改变复选框的大小不是文本旁边。

CSS：

* { 
    box-sizing: border-box; 
} 

label { 
    display: inline-block; 
} 

.checkbox { 
    position: relative; 
    min-height: 24px; 
    font-size: 1.6rem; 
} 

.checkbox input { 
    -webkit-tap-highlight-color: transparent; 
    height: 10px; 
    margin: 6px; 
    opacity: 0; 
    outline: none; 
    position: absolute; 
    left: 1px; 
    top: 1px; 
    width: 10px; 
} 

.checkbox .custom { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    display: inline-block; 
    height: 24px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 24px; 
} 

.checkbox span { 
    display: inline-block; 
    margin-left: 34px; 
    margin-top: 0; 
    position: relative; 
    top: 3px; 
} 

.checkbox input:checked:not(:disabled) + .custom { 
    background-color: #0574ac; 
    border-color: #0574ac; 
} 

.checkbox span { 
    margin-left: 0px; 
} 

.checkbox span.custom { 
    margin-left: 34px; 
    display: inline-block; 
    width: 100px; // MY TRY 
} 

.checkbox span.custom .radio span.custom { 
    margin-left: 34px; 
    margin-right: 34px; 
    display: flex; 
} 

.radio input:checked + .custom:after { 
    background-color: #0574ac; 
    border-radius: 100%; 
    border: 3px solid #fff; 
    content: ""; 
    display: block; 
    height: 16px; 
    position: absolute; 
    width: 16px; 
}

HTML：

<label for="checkbox1" class="checkbox"> 
     <input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox 1</span> 
</label>

JSFiddle Demo

来源

2016-08-30 user4756836

嗯为什么一些很多的CSS？你只想让标签与复选框对齐？ –

是的，我需要将标签与复选框对齐。左边的标签和右边的复选框@AdamBuchananSmith – user4756836

@ user4756836，我刚才注意到这里的评论，你想在标签文本和复选框之间切换。我也为此添加了一个例子，欢迎您在答案中检查更新。 – Dekel

您应该删除.checkbox .custom，也是width: 24px您拥有的position: absolute有导致您的问题。

这里是一个工作版本：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
} 
 

 
.checkbox { 
 
    position: relative; 
 
    min-height: 27px; 
 
    font-size: 1.6rem; 
 
} 
 

 
.checkbox input { 
 
    -webkit-tap-highlight-color: transparent; 
 
    margin: 6px; 
 
    opacity: 0; 
 
    outline: none; 
 
    position: relative; 
 
    left: 1px; 
 
    top: 1px; 
 
    line-height: 26px; 
 
} 
 
.checkbox input#checkbox2, .checkbox input#checkbox3 { 
 
    opacity: 1; 
 
} 
 
.checkbox3 { 
 
    display: flex; 
 
} 
 
.checkbox3 span { 
 
    order: -1; 
 
} 
 
.checkbox .custom { 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    height: 27px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
.checkbox span { 
 
    display: inline-block; 
 
    margin-left: 34px; 
 
    margin-top: 0; 
 
    position: relative; 
 
    top: 3px; 
 
} 
 

 
.checkbox.checkbox3 span.custom { 
 
    margin-left: 0; 
 
} 
 
.checkbox input:checked:not(:disabled) + .custom { 
 
    background-color: #0574ac; 
 
    border-color: #0574ac; 
 
} 
 

 
.checkbox span { 
 
    margin-left: 0px; 
 
} 
 

 
.checkbox span.custom { 
 
    margin-left: 34px; 
 
    display: inline-block; 
 
} 
 

 
.checkbox span.custom .radio span.custom { 
 
    margin-left: 34px; 
 
    margin-right: 34px; 
 
    display: flex; 
 
} 
 

 
.radio input:checked + .custom:after { 
 
    background-color: #0574ac; 
 
    border-radius: 100%; 
 
    border: 3px solid #fff; 
 
    content: ""; 
 
    display: block; 
 
    height: 16px; 
 
    position: absolute; 
 
    width: 16px; 
 
}

<label for="checkbox1" class="checkbox"> 
 
    <input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox 1</span> 
 
</label> 
 
<br /> 
 
<label for="checkbox2" class="checkbox"> 
 
    <input id="checkbox2" type="checkbox" role="checkbox" /><span class="custom">Checkbox 2</span> 
 
</label> 
 
<br /> 
 
<label for="checkbox3" class="checkbox checkbox3"> 
 
    <input id="checkbox3" type="checkbox" role="checkbox" /><span class="custom">Checkbox 3</span> 
 
</label>

我不知道为什么你设置opacity: 0的复选框本身，所以我加入的复选框的例子，而不opacity: 0

更新

我注意到您希望标签位于左侧，复选框位于右侧，因此我还为使用Flexbox模型添加了一个示例。

来源

2016-08-30 21:35:01 Dekel

尝试是这样的：

label { 
 
    display: inline-block; 
 
    text-align: right; 
 
}

<div class="block"> 
 
    <label>Simple label</label> 
 
    <input type="checkbox" /> 
 
</div>

来源

2016-08-30 21:22:44 agsolid

这甚至没有复选框。它也不包含OP示例的自定义蓝色效果。 –

你给的代码隐藏与opacity: 0实际本地复选框，然后使用选择:checked改变span.custom元素的background-color当复选框被选中。

你的尝试完全按照你所说的去做。

如果您希望文本出现在选中时变蓝的区域之外，则需要完全重新考虑您的复选框设计，因为如果不大幅改变标记就不可能这样工作，而且整个逻辑它的工作方式。

来源

2016-08-30 21:22:51

我认为您正在寻找类似的东西？这是很难说，虽然https://jsfiddle.net/tkuyxko4/1/

如果你想改变一些东西，评论如下。

HTML

<input id="checkbox1" type="checkbox" role="checkbox" /> 
<label for="checkbox1" class="checkbox">Checkbox 1</label>

CSS

label { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
} 

input[type="checkbox"]:checked + label { 
    background-color: #0574ac; 
    border-radius: 3px; 
    border: 3px solid #fff; 
}

来源

2016-08-30 21:30:05

对齐自定义复选框问题css

回答

更新

相关问题