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

Question

Я создаю сайт с функциями корзины покупок и хочу, чтобы пользователь мог выбрать цвет для продукта, который он покупает.

Допустим, я начал с чего-то вроде этого:

<form action="">
  <input type="radio" name="color" value="red" />
  <input type="radio" name="color" value="green" />
  <input type="radio" name="color" value="black" />
</form>

Какой CSS необходим для отображения цветных полей для каждого из параметров, при этом поля отображаются горизонтально и имеют рамку вокруг выбранного параметра?

В соответствии с:

[redbox] [greenbox] [blackbox]

Answer 1

Вы можете проверить кнопку jQuery UI http://jqueryui.com/demos/button/#radio

Она позволяет вам создавать хорошие стили для флажков / переключателей и т. Д.

Я не уверен, что вы 'Я хотел бы использовать для этого целую среду, но, насколько я знаю, радио-кнопки не очень «стилевые».Вам нужно создать еще один элемент рядом с ним и программно изменить выбранное значение переключателя.

Надеюсь, это поможет,

Marko

Answer 2

Я бы подумал, что вы не будете использовать радио-боксы. У вас может быть скрытое поле ввода, в котором хранится цвет, и 3 элемента для цветовых полей. События onclick будут обрабатывать установку классов, чтобы выбранный элемент имел границу и устанавливалось скрытое значение.

Используя jQuery, это выглядело бы примерно так:

<style type=text/css>
.cchoice { width:10px; height:10px; }
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
.cpicked { border:2px solid yellow; }
</style>

<input type="hidden" name="colorChoice" id="colorChoice" value="">

<div id="cc_Red" class="cchoice red" onclick="makeChoice('red');">
<div id="cc_Green" class="cchoice green" onclick="makeChoice('green');">
<div id="cc_Blue" class="cchoice blue" onclick="makeChoice('blue');">

<script type=text/javascript>
function makeChoice(col) {
  if (col != 'green') $('#cc_Green').removeClass('cpicked');
  if (col != 'blue') $('#cc_Blue').removeClass('cpicked');
  if (col != 'red') $('#cc_Red').addClass('cpicked');
  $('#colorChoice').val(col);
}
</script>

Даже если у меня неправильный синтаксис, может быть, это поможет вам выбрать правильный путь? .. дайте мне знать, если я могу помочь вам.

Answer 3

Поскольку каждый браузер будет отображать кнопку по-своему, я бы использовал кнопки серии, которые изменяют состояние скрытого поля ввода.(Я не проверял это, но это общая идея):

<form id="myForm" action="">
  <input type="hidden" id="color" name="color" value="red" />
  <button type="button" style="background-color:red; width:50px; height:50px;"></button>
  <button type="button" style="background-color:green; width:50px; height:50px;"></button>
  <button type="button" style="background-color:blue; width:50px; height:50px;"></button>
</form>

<script>
/* I like jQuery, sue me ;) */
$(function() {
  $('#myForm button').click(function() {
     $('#color').val($(this).css('background-color'));
     $(this).siblings('button').css('border','none');
     $(this).css('border','2px solid black');
  });
});
</script>