Ändern des Kontrollkästchen-Symbols mit simple_form

Question

Ich bin neu bei Rails und Web-Apps und würde mich freuen, wenn jemand dabei helfen könnte. Verwenden Sie simple_form und versuchen, Kontrollkästchen Bild zu ändern, aber css (scss) scheint nicht zu funktionieren. Codes sind unten.

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

generierter Code

<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> 

Und SCSS ist

.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

Ihr ein paar Dinge fehlt diese Funktion zu erhalten.

In Ihrem HTML müssen Sie ein <label> Tag mit einem for="" attr, wie so haben;

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

Die Etiketten für attr muss die ID

Dann für Ihre SCSS Änderung input[type=checkbox] + label:after-& + label:after, wie so die Checkbox entsprechen;

.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'); 
    } 

} 

Ihre :after pseudos erfordern auch einen Inhalt attr für sie zu arbeiten.

I created a codepen for you