自定義複選框和標籤對齊

-1

我已經創建了一個自定義複選框，其中隱藏了複選框，並且標籤以自定義方式顯示爲checbox。一切都很好，但是當我給它一個標籤時，它沒有正確對齊。這裏是小提琴鏈接自定義複選框和標籤對齊

verticals alignment : middle ;

一定很成功，但它沒有。有人可以幫助解決它

來源

2017-03-07 ani

但是，你在哪裏要居中呢？根據哪個元素？ –

我不想將它居中..標籤樣式的標籤必須位於複選框 – ani

旁邊但是隻有一個複選框。 –

如果你可以改變你的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

來源

2017-03-07 14:29:38 Fabio