チェックボックスの内容のサイズを大きくするには？

Question

は、どのように私は後に、選択したフォントサイズチェックボックスコンテンツのチェックボックスに

コンテンツを選択した後、これは私のコード

.checkbox-custom { 
 
    opacity: 0; 
 
    position: absolute; 
 
} 
 
.checkbox-custom, .checkbox-custom-label { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 5px; 
 
    cursor: pointer; 
 
} 
 
.checkbox-custom-label { 
 
    position: relative; 
 
} 
 
.checkbox-custom + .checkbox-custom-label:before { 
 
    content: ' '; 
 
    background: transparent; 
 
    border: 1px solid #666666; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 20px; 
 
    height: 20px; 
 
    padding: 2px; 
 
    margin-right: 10px; 
 
    text-align: center; 
 
} 
 
.checkbox-custom:checked + .checkbox-custom-label:before { 
 
    background: transparent; 
 
    border: 1px solid #666666; 
 
    content: 'X'; 
 
}

<div> 
 
    <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox"> 
 
    <label for="checkbox-1" class="checkbox-custom-label">checkbox1</label> 
 
</div>

ある

を変更することができます。 'バツ';

フォントサイズを大きくする。可能ならば??

これは、私はこれがあなたの役に立てば幸い私のFIDDLE

電流出力出力

Answer 1

画像ごとに線のように見せたい場合は、背景画像のグラデーションを活用できます。

ラインの16.5-17.5を計算するには、pythagoras 'theorumを使用します。あなたのチェックボックスの高さと幅は（20px + 2px + 2px = height + padding + padding）24です。だからsqrt(24*2 + 24*2) = sqrt(1152) = 33.94 = ~34。半分の点が必要なので、2で割り、34/2 = 17、それを1ピクセルの線にしたいので、17 = 16.5-17.5のピクセルのどちらかに.5を移動します。

"太って"したい場合は、数字をそれぞれ16.5と17.5に減らして単純に減らしてください。

.checkbox-custom:checked + .checkbox-custom-label:before { 
    background-image: 
     linear-gradient(45deg, transparent, transparent 16.5px, black 16.5px, black 17.5px, transparent 17.5px, transparent), 
     linear-gradient(-45deg, transparent, transparent 16.5px, black 16.5px, black 17.5px, transparent 17.5px, transparent); 
} 

UPDATED FIDDLE

PS。あなたがプロダクションでこれを使うつもりなら、ベンダープレフィックスを見るのを忘れないでください。これを行うためのツールがいくつかありますが、最も簡単なのはJSFiddleで、linear-gradientのスタイルとヒットTABキー（Prefixed fiddle）です。

Answer 2

.checkbox-custom { 
    height: 50px; 
    width: 300px; 
} 

を期待

です。