Подскажите как изменить вид опции

[Ch0oJoy]

Здравствуйте! Хочу изменить отображение опций, но не получается.

Как сделать как на скрыне7

[n3bo]

http://dimox.name/custom-checkboxes-and-radio-buttons-using-css-only/

[Ch0oJoy]

Не получается сделать. Подскажите как в css пометить выбраную опцию и зафиксировать? Пробую добавлять active и focus, не получается

[Ch0oJoy]

Получилось, но столкнулся с одной проблемой:

1. через css скрыл радио кнопки (иконки)

.product-info .options input[type='radio'] + label{display:inline-block;vertical-align:top;margin:2px 3px 0 0;width:14px;height:14px;background:#f5f5f5;border:solid 1px #aaa;border-radius:10px;display:none}

2. опции radio отображаются как нужно, но теперь опции image не отображается. Как можно отвязать опцию image от данного кода, чтоб они были независимы?

вот код опций radio и image

        <?php if ($option['type'] == 'radio') { ?>
        <div id="input-option<?php echo $option['product_option_id']; ?>" class="option form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
          <b><?php if ($option['required']) { ?>* <?php } ?><?php echo $option['name']; ?>:</b>
          <?php foreach ($option['product_option_value'] as $option_value) { ?>
		  <div class="option_radio">
          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
          <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"></label>
		  <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
          </label>
          </div>
          <?php } ?>
        </div>
        <?php } ?>
if ($option['type'] == 'image') { ?>
        <div id="input-option<?php echo $option['product_option_id']; ?>" class="option form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
          <b><?php if ($option['required']) { ?>*<?php } ?><?php echo $option['name']; ?>:</b>
          <div class="option-image">
            <?php foreach ($option['product_option_value'] as $option_value) { ?>
			<div>
              <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
              <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>">
				<img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" />
				<span><?php echo $option_value['name']; ?></span>
				<?php if ($option_value['price']) { ?><span><?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?></span><?php } ?>
			  </label>
			</div>
            <?php } ?>