カスタムチェックボックス内にチェック/ティックを中央に配置

Question

カスタムチェックボックスを作成していますが、機能はほぼそこにありますが、スタイリングには方法があります。

私はいくつかの問題を抱えている、

1. 私はチェックが
2. 円内に中心に必要私だけで、チェックボックスそのものではないにテキストをクリックするだけでアクティブにするためのチェックが必要です。

私は恐れていますが、左の位置の左にあるパディングを使用せずに小切手を中央に置いているようです。あなたはそのフロートがオンになっている間、あなたがそれを中央にすることはできません、左floatに入力スタイリングだインラインコードを削除する必要が

HTML

<label for='product-45-45'> 
    <input type='checkbox' style="float:left;" id='product-45-45' /> 
    <div class="accord-text"> 
    <strong>header:</strong> sub text 
    <strong>more text!</strong> 
    </div> 
</label> 

CSS

input[type=checkbox] { 
    display: none; 
} 

input[type=checkbox] + .accord-text:before { 
    width: 30px; 
    height: 30px; 
    border-radius: 200%; 
    background-color: #d6e4ec; 
    border: 1px solid #000; 
    display: block; 
    font-size: 150%; 
    font-weight: 900; 
    content: ""; 
    color: green; 
} 

input[type=checkbox]:checked + .accord-text:before { 
    display: table; 
    content: "\2713"; 
} 

Answer 1

• 問題1：それを中央に0オート：次にマージンを追加accord-textのdivからテキストを削除し、外部にそれを置きます。私たちがチェックしたときも、私は高さの問題を修正しました。このスニペットと

.row{ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
input[type=checkbox] { 
 
    display: none; 
 
} 
 

 
input[type=checkbox] + .accord-text:before { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 200%; 
 
    background-color: #d6e4ec; 
 
    border: 1px solid #000; 
 
    display: block; 
 
    font-size: 140%; 
 
    font-weight: 900; 
 
    content: ""; 
 
    color: green; 
 
} 
 

 
input[type=checkbox]:checked + .accord-text:before { 
 
    display: table; 
 
    content: "\2713"; 
 
    text-align: center; 
 
}

<div class="row"> 
 
    <label for='product-45-45'> 
 
    <input type='checkbox' style="float:left;" id='product-45-45' /> 
 
    <div class="accord-text"> 
 

 
    </div> 
 
</label> 
 

 
    <strong>header:</strong> sub text 
 
    <strong>more text!</strong> 
 
</div>

Answer 2

。チェックボックスicが確認されたときにtext-align: center;、および

問題2は、チェックボックスからstyle="float:left;"を削除します：

input[type=checkbox]:checked { 
    float: none; 
} 

input[type=checkbox] + .accord-text:before { 
    margin: 0 auto; 
    width: 30px; 
    height: 30px; 
    border-radius: 200%; 
    background-color: #d6e4ec; 
    border: 1px solid #000; 
    display: block; 
    font-size: 150%; 
    font-weight: 900; 
    content: ""; 
    color: green; 
} 

Answer 3

チェック、

このinput[type=checkbox]:checked + .accord-text:before

input[type=checkbox] { 
 
    display: none; 
 
} 
 
label { 
 
float:left; 
 
} 
 
input[type=checkbox] + .accord-text:before { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 200%; 
 
    background-color: #d6e4ec; 
 
    border: 1px solid #000; 
 
    display: block; 
 
    font-size: 150%; 
 
    font-weight: 900; 
 
    content: ""; 
 
    color: green; 
 
    text-align:center; 
 
    max-height:30px; 
 
} 
 

 
input[type=checkbox]:checked + .accord-text:before { 
 
    display: table; 
 
    content: "\2713"; 
 
    max-height:30px; 
 
    display:block; 
 
} 
 
span { 
 
float:left; 
 
padding-left:5px; 
 
}

<label for='product-45-45'> 
 
    <input type='checkbox' style="float:left;" id='product-45-45' /> 
 
    <div class="accord-text"></div> 
 
</label> 
 
<span><strong>header:</strong> sub text 
 
    <strong>more text!</strong> 
 
</span>

に display:blockと max-heightを追加します。