Jump to content
Sign in to follow this  
REDDI

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

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

поднимаю:-)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 как ты сказал. Цены перестали пересчитываться( Подскажи пожалуйста как быть?

Share this post


Link to post
Share on other sites
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;
}

 

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

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites

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

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

<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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Помогите пожалуйста правильно вынести 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;
	          }

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.