arkadaşlar merhaba opencart temada radio butonların görüntüsünü değiştirdim kutuhaline getirebildim css ile fakat üzerine tıklayınca seçili olanın renginin değişmesini istiyorum ama checked la olsun jquery ile olsun bir türlü yapamadım kodlarım aşağıda yardımcı olabilirseniz çok sevinirim

:hover çalışıyor ama :checked çalışmıyor :active de çalışmıyor

<div id="bedensecenegi" class="form-group{% if option.required %} required{% endif %}">
              <label class="control-label">{{ option.name }}</label>
              <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
                <div class="radio">
                  <label>
                    <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
                    {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}                  
                    {{ option_value.name }}
                    {% if option_value.price %}
                    ({{ option_value.price_prefix }}{{ option_value.price }})
                    {% endif %} </label>
                </div>
                {% endfor %} </div>
            </div>
#bedensecenegi input[type=radio],
 #bedensecenegi input[type=checkbox] {
   display: none;
 }
 #bedensecenegi input[type="radio"]:checked + label {
   background-color: yellow;
 }
 #bedensecenegi label {
     float: left;
   display: block;
   appearance: button;
   -webkit-appearance: button;
   -moz-appearance: button;
   -ms-appearance: button;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
   background: white;
     padding: 10px;
   font-size: 13px;
   color: #111111;
   border: 2px solid #AAAAAA;
     display: inline-block;
   margin: 0 auto;
   text-align: center;
     margin-right: 20px;
     margin-bottom: 20px;
}