Symfony2 checkbox button images using choice form

CheckBoxImgType.php

<?php

namespace CheckInBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;

class CheckBoxImgType extends AbstractType
{
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'choices' => array(
                array('0' => 'very-sad'),
                array('1' => 'sad'),
                array('2' => 'happy'),
            ),
            'expanded' => true,
            'attr' => array('class' => 'happyfaces'),
            'choice_attr' => array(
                '0' => array('class' => ''),
                '1' => array('class' => ''),
                '2' => array('class' => ''),
            )
        ));
    }

    public function getParent()
    {
        return 'choice';
    }

    public function getName()
    {
        return 'checkboximg';
    }

}

fields.html.twig

{% block checkbox_radio_label %}
    {# Do not display the label if widget is not defined in order to prevent double label rendering #}
    {% if widget is defined %}
        {% if required %}
            {% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) %}
        {% endif %}
        {% if parent_label_class is defined %}
            {% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ parent_label_class)|trim}) %}
        {% endif %}
        {% if label is not same as(false) and label is empty %}
            {% set label = name|humanize %}
        {% endif %}
        {# @@ FAR 23/11/2015 - Change construction to insert images by CSS way #}
        {{- widget|raw -}}
        <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}" for="{{ id }}" id="{{ id }}_label"{% endfor %}>
            {{- label is not same as(false) ? (translation_domain is same as(false) ? label : label|trans({}, translation_domain)) -}}
        </label>
    {% endif %}
{% endblock checkbox_radio_label %}

form_check.html.twig

{% form_theme form '@CheckIn/Form/fields.html.twig' %}

<div class="col-md-3">&nbsp;</div>
<div class="col-md-6">
    {{ form_start(form) }}

    <div class="form_row row">
        <div class="col-md-1">&nbsp;</div>
        <div class="col-md-10 row-centered">
            <h3 id="question_status">{{ question_status }}</h3>
        </div>
    </div>

    <div class="form_row row">
        <div class="col-md-1">&nbsp;</div>
        <div class="col-md-10 row-centered">
            {{ form_widget(form.satisfaction_level) }}
        </div>
    </div>
    <div class="form_row row">
        <div class="col-md-1">&nbsp;</div>
        <div class="col-md-10 row-centered">
            <div class="bg-info" id="val-messages"></div>
        </div>
    </div>
    <div class="form_row row">
        <div class="col-md-1">&nbsp;</div>
    </div>
    <div class="form_row row">
        <div class="col-md-3">&nbsp;</div>
        <div class="col-md-6">
            {{ form_widget(form) }}
        </div>
    </div>

    {{ form_end(form) }}
</div>
<div class="col-md-4">&nbsp;</div>

satisfaction.css

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

#check_satisfaction_level .radio input{
    margin:0;padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    visibility: hidden;
    z-index: -1;
}

#check_satisfaction_level .radio {
    display: inline;
}

#check_satisfaction_level #check_satisfaction_level_very_sad_label {
    background-image: url(/img/checkin/very-sad.png);
}

#check_satisfaction_level #check_satisfaction_level_sad_label {
    background-image: url(/img/checkin/sad.png);
}

#check_satisfaction_level #check_satisfaction_level_meh_label {
    background-image: url(/img/checkin/meh.png);
}

#check_satisfaction_level #check_satisfaction_level_fine_label {
    background-image: url(/img/checkin/fine.png);
}

#check_satisfaction_level #check_satisfaction_level_happy_label {
    background-image: url(/img/checkin/happy.png);
}

#check_satisfaction_level input:active +.satisfaction-level {opacity: .9;}
#check_satisfaction_level input:checked +.satisfaction-level {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
.satisfaction-level:not(.control-label){
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:70px;height:70px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
    font-size: 0px;
    margin: 10px;
}
.satisfaction-level:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}