Как заменить радиокнопку рамкой в картинке?

[nikki4]

Нашел как скрыть кружок кнопки, но как сделать, чтобы при переключении цвета у картинки появлялась рамка?

т.е. чтобы было понятно какой текущий цвет выбран.

 

<div class="form-group required">

<div id="input-option232">
<div class="radio">
<label> <input name="option[232]" value="37" type="radio">						
<img src="http://zohen.ru/image/cache/catalog/colors/black-50x50.jpg" alt="Черный" class="img-thumbnail"> Черный </label>
</div>

<div class="radio">
<label>
<input name="option[232]" value="38" type="radio">
<img src="http://zohen.ru/image/cache/catalog/colors/red-50x50.jpg" alt="Красный" class="img-thumbnail"> Красный </label></div>
</div>
</div>

http://www.cssdesk.com/PmGYM

 

пробовал так, но не сработало:

input[name="option[232]"]:checked img {

 

Edited February 6, 2017 by nikki4

[Igor Schnaider]

input:checked ~ img {
  border: 1px solid;
}

 

[nikki4]

Пришлось изменить вывод html

Попробовал так, но не вышло