Как видоизменить radio в опциях?

[REDDI]

Всем привет  повидал на форуме много уже тем подобных. Как не пробовал - не получается. 
структура  кнопки:

<div class="radio">
	<label>
		<input type="radio" name="option[337]" value="481" data-points="0" data-prefix="-" data-price="940.0000">
		10 ml
	</label>
</div>

как сделать что бы при активной кнопке - background был к примеру красного цвета?
я пробовал 

.radio input:checked + .radio {
	background:#f4c752;
    border: 1px solid #f4c752;
}

но не получается( живой пример: https://grasseparfum.ru/index.php?route=product/product&path=60&product_id=96
заранее спасибо)

[REDDI]

поднимаю

[thentru]

вынести input за label
Обратите внимание на id и for
 

<div class="radio">
  <input id="radio337-481" type="radio" name="option[337]" value="481" data-points="0" data-prefix="-" data-price="940.0000">
  <label for="radio337-481">
    10 ml
  </label>
</div>

прописать стили
 

.radio input {
  display: none;
}
.radio input:checked + label {
  background:#f4c752;
  border: 1px solid #f4c752;
}

 

[REDDI]

3 часа назад, thentru сказал:

вынести input за label
Обратите внимание на id и for
 

<div class="radio">
  <input id="radio337-481" type="radio" name="option[337]" value="481" data-points="0" data-prefix="-" data-price="940.0000">
  <label for="radio337-481">
    10 ml
  </label>
</div>

прописать стили
 

.radio input {
  display: none;
}
.radio input:checked + label {
  background:#f4c752;
  border: 1px solid #f4c752;
}

 

а если у меня стоит плагин пересчета цены на jquery в зависимости от выбора опции? Я вот добавил ID и FOR как ты сказал. Цены перестали пересчитываться( Подскажи пожалуйста как быть?

[REDDI]

3 часа назад, thentru сказал:

вынести input за label
Обратите внимание на id и for
 

<div class="radio">
  <input id="radio337-481" type="radio" name="option[337]" value="481" data-points="0" data-prefix="-" data-price="940.0000">
  <label for="radio337-481">
    10 ml
  </label>
</div>

прописать стили
 

.radio input {
  display: none;
}
.radio input:checked + label {
  background:#f4c752;
  border: 1px solid #f4c752;
}

 

 вот этот плагин у меня

[thentru]

так не надо копировать бездумно
я не зря написал про id и for - значения должны быть уникальными
 

id="radio337-481" name="option[337]" value="481"

 

[miwany]

Доброго времени суток !

Имеем такой код:

<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
				<label class="control-label"><?php echo $option['name']; ?></label>
				<div id="input-option<?php echo $option['product_option_id']; ?>">
					<?php foreach ($option['product_option_value'] as $option_value) { ?>
						<div class="radio radchek">
							<input type="radio" id="<?php echo $option['product_option_id']; ?>" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
							<label for="<?php echo $option['product_option_id']; ?>">
								<?php if ($option_value['image']) { ?>
								<img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
								<?php } ?>                    
								<?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>
            </div>

и стиль к нему:

.form-group .radchek input[type="radio"] {
	display: none;
}
.form-group .radchek label {
	position: relative;
	color: #015660;
	font-size: 18px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	display: block;
	cursor: pointer;
	border: 1px solid #015660;
}
.form-group .radchek input[type="radio"]:checked + label {
	border: 1px solid #f4f5fe;
	background-color: #70b9e2;
}
.form-group .radchek:before, .form-group .radchek:after {
	content: " ";
    clear: both;
}

прошу подправить в коде, т.к. малость не получается: при кликанье на вторую или третью кнопки - загорается только первая ??

 

[mpn2005]

Немного сделано некорректно тут:

<input type="radio" id="<?php echo $option['product_option_id']; ?>" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<label for="<?php echo $option['product_option_id']; ?>">

Можно сдлать так:

<input type="radio" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>">

id должен быть уникальным, а product_option_id не уникально. Оно повторяется для всех значений в этой опции.

Ну и просто цифру не стоит использовать в id. 

[miwany]

ОКЭ, спасибо ! помогло...

[miwany]

Еще вопросик, можно ли задать разные стили для кнопки радио ?

Один вариант - картинка в круге; второй вариант - текст в прямоугольнике.

[Lex177]

Помогите пожалуйста правильно вынести input за label. Сейчас hover работает, а checked никак не удается заставить отмечать выделенную опцию. Из этой темы понял что нужно немного изменить шаблон, но у меня при изменении перестают переключаться чекбоксы. Подскажите как правильно модифицировать код? Моих скудных знаний не хватает.

<?php if ($option['type'] == 'radio') { ?>
            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
              <label class="control-label"><?php echo $option['name']; ?></label>
              <div id="input-option<?php echo $option['product_option_id']; ?>">
                <?php foreach ($option['product_option_value'] as $option_value) { ?>
                <div class="radio radio-type-button">
                  <label>
                    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" 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>
            </div>

	.radio-type-button {
	    display: inline-block;
		height: 40px;
		border: none;
		box-shadow: none;
		font-weight: 700;
		text-align: center;
		width: auto;
		/*padding: 0 10px;*/
		font-size: 14px;
		border-radius: 0px;
		border: 1px solid #e1e1e1;
		margin: 5px 5px 17px 5px;
	}
	
	.radio-type-button label {
			padding: 8px;
			margin: 0px 10px 10px 10px;
			text-align: center;
		}
	
	.radio-type-button input {
	          visibility: hidden;
	          position: absolute;
	     }
	     
	.radio-type-button:hover {
	              background: #2e2e2e;
				  color: #fff;
	          }
	          
	.radio-type-button:checked {
	              background: #2e2e2e;
				  color: #fff;
	          }