Customized check box and label alignment

Question

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

But where do you want to center it? According to which element? — kind user, Mar 07 '17 at 14:05
I don't want to center it .. Label styled label has to come next to check box — ani, Mar 07 '17 at 14:09
I referred this link http://stackoverflow.com/questions/15230820/vertical-align-checkbox-label — ani, Mar 07 '17 at 14:11
Links to jsfiddle must be accompanied by code in the question itself — Pete, Mar 07 '17 at 14:28

score 1 · Accepted Answer · answered Mar 07 '17 at 14:29

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

score 0 · Answer 2 · answered Mar 07 '17 at 14:10

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/

score 0 · Answer 3 · answered Mar 07 '17 at 14:31

0

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

answered Mar 07 '17 at 14:31

andfra

163
11

Customized check box and label alignment

3 Answers3

Linked