自定义复选框和标签对齐 [英] Customized check box and label alignment

问题描述

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

I have created a customized check box where the check box is hidden and a label is customized in a way to appear as checbox . everything is work fine but when I give it a label its not getting aligned properly . here is the fiddle link

http：// jsfiddle .net / 1aeur58f / 130 /

verticals alignment : middle ; 

必须有效，但没有成功。有人可以帮助解决它

Must have worked but it didnt . can someone help to resolve it

推荐答案

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

If you can change your HTML code I suggest you to use pseudo-elements to create custom checkboxes.

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

这篇关于自定义复选框和标签对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！