simple_formでチェックボックスのアイコンを変更する

Question

私はレールとウェブアプリで新しく、誰かがこれを手伝うことができたらうれしいです。 simple_formを使用してチェックボックスのアイコンイメージを変更しようとしましたが、css（scss）が機能していないようです。 コードは次のとおりです。

<div class="col-md-6"> 
    <%= f.input :is_something, as: :boolean, input_html: { class: 'custom-check-box' } %> 
</div> 

コード

<div class="col-md-6"> 
    <div class="input boolean optional test_is_somethiing"><input value="0" type="hidden" name="test[is_something]" /><label class="boolean optional checkbox" for="test_is_somethiing"><input class="boolean optional custom-check-box" type="checkbox" value="1" checked="checked" name="test[is_something]" id="test_is_somethiing" />Label</label></div> 
</div> 

を生成し、SCSSは

.custom-check-box { 
    opacity: 0; 
    vertical-align: middle; 
    input[type=checkbox] + label:after { 
    opacity: 1; 
    display: inline-block; 
    background: image-url('check_box_off.png'); 
    background-repeat: no-repeat; 
    vertical-align: middle; 
    background-size: 50%; 
    cursor: pointer; 
    &:checked + label:after { 
     opacity: 1; 
     display: inline-block; 
     background-size: 50%; 
     background: image-url('check_box_on.png'); 
     background-repeat: no-repeat; 
     vertical-align: middle; 
     cursor: pointer; 
    } 
    } 
} 

Answer 1

あなたはこの作業を取得するためにいくつかのことを行方不明です。

HTMLでは<label>タグにfor="" attrを付ける必要があります。

<div> 
    <input id="custom-checkbox" class="custom-check-box" type="checkbox" /> 
    <label for="custom-checkbox"></label> 
</div> 

attrのためのラベルはそうのように、& + label:afterにごSCSS変更input[type=checkbox] + label:afterため

次にチェックボックスのidと一致する必要があります。

.custom-check-box { 
    display: none; 
    vertical-align: middle; 

    & + label:after { 
    content: ''; 
    padding: 16px; 
    display: inline-block; 
    background: image-url('check_box_off.png'); 
    background-repeat: no-repeat; 
    vertical-align: middle; 
    background-size: 50%; 
    cursor: pointer; 
    } 

    &:checked + label:after { 
    background: image-url('check_box_on.png'); 
    } 

} 

あなた:after pseudosはまた、それらが機能するためのコンテンツATTRが必要です。

I created a codepen for you