CSS to make radio buttons show as small coloured boxes

Question

Im implementing a site with shopping cart features and want the user to be able to select the color for the product they are purchasing.

Let's say I started with something like this:

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

What CSS is needed to show coloured boxes for each of the options, with the boxes displayed horizontally and have a border around the selected option?

Along the lines of:

[redbox] [greenbox] [blackbox]

Answer 1

Hi Evolve,

You can check out jQuery UI's Button http://jqueryui.com/demos/button/#radio

It allows you to create nice styles for checkboxes/radio buttons and so on..

I'm not sure if you'd want to use a whole framework for that though, but as far as I know, radio buttons aren't very 'stylable'. You'd need to create another element next to it, and change the selected value of the radio button programatically.

Hope this helps,

Marko

Answer 2

Because each browser is going to render the button differently, I would use a series buttons that are altering the state of a hidden input field. (I didn't test this, but it's the general idea):

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

Answer 3

I would think that you wouldn't use radio boxes. You can have a hidden input field that stores the color, and 3 div's for the color boxes. onclick events would handle setting the classes so the selected item has the border and the hidden value is set.

Using jQuery it would look something like this:

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

Even if I have some syntax wrong, maybe this will set you on the right path?.. let me know if I can be of more help.