更新

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>

JSFiddle Demo

Answer 1

您应该移除DataObject.PastingEvent的{{1}}以及您所遇到的position: absolute导致您出现问题。

这是一个工作版本：

.checkbox .custom

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

更新

我在评论中注意到您希望标签位于左侧，而右侧的复选框也是如此，所以我还使用flexbox模型添加了一个示例。

Answer 2

尝试这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您提供的代码会隐藏opacity: 0的实际原生复选框，然后使用选择器:checked更改background-color元素的span.custom检查。

你的尝试正是你所说的。

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

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;
}

对齐自定义复选框问题css

4 个答案:

更新