Customized check box and label alignment

问题

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

回答1:

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

Here's the Jsfiddle

回答2:

the reason why the label was not displayed was, that you forgot the quotes after your id boxlabel. If you add the quote the label will be displayed.

For the Styling check this article: https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/

回答3:

In your code I suggest close a id="boxlabel" (there's missing a second ") and add display:inline-block for .checkboxFour.

Good examples of checkbox stylig you have here

来源：https://stackoverflow.com/questions/42650324/customized-check-box-and-label-alignment

标签

css

checkbox