カスタマイズされたチェックボックスとラベルの整列

-1

私はチェックボックスが非表示になっており、ラベルがchecboxとして表示されるようにカスタマイズされたカスタマイズされたチェックボックスを作成しました。すべてがうまく動作しますが、ラベルを付けると適切に配置されません。ここでフィドルリンクカスタマイズされたチェックボックスとラベルの整列

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

verticals alignment : middle ;

が働いている必要がありますが、それはdidntのさ。誰かがそれを解決するのに役立つことができます

出典

2017-03-07 ani

hereを持っているしかし、ここであなたがそれを中央にしたいですstylig？どの要素によれば？ –

私はそれを中心にしたくない。ラベルスタイルのラベルはチェックボックスの隣に来なければならない。 – 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