Перейти к содержанию
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"

 

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


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

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

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

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

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

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

Войти

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

Войти

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

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

×

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

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