0
私のラベルをチェックボックスの中央に合わせる際に問題があります。私はそれが見えるすべてを試して、私はついに諦めています。カスタムのチェックボックス、ラベルの中央を整列する
私はdisplay: inline-block, vertical-align: middle;でテストしましたが、何も動作していないようです。私はしかし、文字をcontent:''に入れると、テキストが浮き上がることが分かりました。
私は何かが欠けていると思う...
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
color: inherit;
font-size: inherit;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 28px;
height: 28px;
background: #cad1d9;
border-radius: 3px;
}
.styled-checkbox:hover + label:before {
background: #f35429;
}
.styled-checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
background: #f35429;
}
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto;
}
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 0px;
background: white;
width: 3px;
height: 3px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label>
ありがとうございます:) – John