Question

我创建了一个自定义复选框，其中隐藏了复选框，并以一种显示为checbox的方式自定义标签。一切都很好，但当我给它一个标签时，它没有正确对齐。这里是小提琴链接

verticals alignment : middle ;

一定有用，但没有。有人可以帮助解决它

Answer 1

如果您可以更改HTML代码，我建议您使用伪元素创建自定义复选框。

HTML

<div class="checkboxFour">
  <input type="checkbox" value="1" id="checkboxFourInput" name="" data-toggle="modal" data-target="#myModal" />
  <label for="checkboxFourInput">styled label</label>
</div>

CSS

input[type=checkbox] {
  visibility: hidden;
}

. checkboxFour {
  width: 10px;
  height: 10px;
  background: #ddd;
  margin: 20px 90px;
  border-radius: 100%;
  position: relative;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.checkboxFour label:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 0;
  transition: all .5s ease;
  cursor: pointer;
  z-index: 1;
  background: #333;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.checkboxFour input[type=checkbox]:checked + label:before {
  background: #26ca28;
}

#boxlabel {
  vertical-alignment: middle;
}

这是Jsfiddle

Answer 2

标签未显示的原因是，您忘记了id boxlabel之后的引号。如果添加引号，则会显示标签。

对于样式检查本文： https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/

Answer 3

在您的代码中，我建议关闭id="boxlabel"（缺少第二个"）并为.checkboxFour添加display:inline-block。

您拥有here

复选框样式的好例子

自定义复选框和标签对齐

3 个答案: