对齐自定义复选框问题css

Question

我想对齐复选框右侧的文本。当前文本出现在多行中。

我试过改变宽度，给它一个固定的宽度:

.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>

<<p> JSFiddle演示/strong>

Answer 1

您应该删除.checkbox .custom中的position: absolute，以及您拥有的导致您出现问题的width: 24px。

下面是一个工作版本:

* {
  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的复选框示例

<标题> 更新

我注意到在注释中，您希望标签在左侧，复选框在右侧，所以我还添加了一个使用flexx模型的示例。

Answer 2

您给出的代码隐藏了opacity: 0的实际本地复选框，然后使用选择器:checked在复选框被选中时更改span.custom元素的background-color。

你的尝试完全按照你告诉它的去做。

如果您希望文本出现在选中后变为蓝色的区域之外，则需要完全重新考虑复选框的设计，因为如果不彻底更改标记及其工作方式的整个逻辑，则不可能以这种方式工作。

Answer 3

试试这样:

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

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

Answer 4

我想你是在找这样的东西吧?虽然真的很难分辨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;
}