How do I style radio buttons with images - laughing smiley for good, sad smiley for bad?

Question

I would like to create an HTML form for user feedback. If the overall feedback is good, the user should click on a laughing smiley, if the overall feedback is bad, the user should choose a sad smiley.

I think this should be done using radio buttons, with the smileys instead of the radio buttons. Maybe I'm wrong though...

Do you know how I can achieve this?

Thanks!

Answer 1

With pure html (no JS), you can't really substitute a radio-button for an image (at least, I don't think you can). You could, though use the following to make the same connection to the user:

<form action="" method="post">
    <fieldset>
       <input type="radio" name="feeling" id="feelingSad" value="sad" /><label for="feelingSad"><img src="path/to/sad.png" /></label>
       <label for="feelingHappy"><input type="radio" name="feeling" id="feelingHappy" value="happy" /><img src="path/to/happy.png" /></label>
    </fieldset>
</form>

Answer 2

You cannot style things like radio buttons, checkboxes, scrollsbars (etc.) at all. These are native to the OS and the browser and not something you can manipulate.

You can simulate this, however by hiding the radio buttons and only showing an image instead as in.

<input type="radio" style="display: none;" id="sad" /><label for="sad"><img class="sad_image" /></label>

Answer 3

Use jQuery. Keep your checkbox elements hidden and create a list like this:

<ul id="list">
    <li><a href="javascript:void(0)" id="link1">Happy face</a></li>
    <li><a href="javascript:void(0)" id="link2">Sad face</a></li>
</ul>

<form action="file.php" method="post">
    <!-- More code -->
    <input type="radio" id="option1" name="radio1" value="happy" style="display:none"/>
    <input type="radio" id="option2" name="radio1" value="sad" style="display:none"/>
    <!-- More code -->
</form>

<script type="text/javascript">
$("#list li a").click(function() {
    $('#list .active').removeClass("active");
    var id = this.id;
    var newselect = id.replace('link', 'option');
    $('#'+newselect).attr('checked', true);
    $(this).addClass("active").parent().addClass("active");
    return false;
});
</script>

This code would add the checked attribute to your radio inputs in the background and assign class active to your list elements. Do not use inline styles of course, don't forget to include jQuery and everything should run out of the box after you customize it.

Cheers!

Answer 4

Well, let's keep them simple, shall we. First off, using pure HTML + CSS:

<div id="emotion">
    <input type="radio" name="emotion" id="sad" /><label for="sad"><img src="sad_image.png" alt="I'm sad" /></label>
    <input type="radio" name="emotion" id="happy" /><label for="happy"><img src="happy_image.png" alt="I'm happy" /></label>
</div>

This will degrade nicely if there's no Javascript. Now for some jQuery goodness. First off, creating the CSS classes we'll need:

.input_hidden {
    position: absolute;
    left: -9999px;
}
.selected {
    background-color: #ccc;
}
#emotion label {
    display: inline-block;
    cursor: pointer;
}
#emotion label img {
    padding: 3px;
}

Now for the Javascript:

$('#emotion input:radio').addClass('input_hidden');
$('#emotion label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

The reason why we're not using display: hidden here is for accessibility reasons. See: http://www.jsfiddle.net/yijiang/Zgh24/1 for a live demo, with something more fancy.

Answer 5

Hi there,

another alternative is to use a form replacement script/library. They usually hide the original element and replace them with a div or span, which you can style in whatever way you like.

Examples are:

http://customformelements.net (based on mootools) http://www.htmldrive.net/items/show/481/jQuery-UI-Radiobutton-und-Checkbox-Replacement.html