Перейти к содержанию
REDDI

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

Рекомендуемые сообщения

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

<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
заранее спасибо)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

поднимаю:-)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

вынести 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;
}

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 как ты сказал. Цены перестали пересчитываться( Подскажи пожалуйста как быть?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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;
}

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

<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;
}

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

 

Screenshot (17).png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.