HTML toggle buttons
coding-style, html
Solution
Since you're representing a single control with a true/false state, you really want to use a checkbox as the underlying form element to maintain compatibility with downlevel browsers, screen readers and so on. One approach here is to associate a label control with the checkbox, and then using a combination of CSS and jQuery to make the actual checkbox itself 'invisible', render the label as a button, and modify the label's border property as the checkbox is checked or unchecked.
This code works in Chrome, Safari, Opera, Firefox and IE (thanks to a conditional-comment hack since IE treats hidden form elements differently to other browsers). If you submit the enclosing form you get ordinary HTML checkbox behaviour in the resulting form submission.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Toggle Button </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
/* Style the label so it looks like a button */
label {
border: 2px outset #cccccc;
background-color: #cccccc;
position: relative;
z-index: 3;
padding: 4px;
}
/* CSS to make the checkbox disappear (but remain functional) */
label input {
position: absolute;
visibility: hidden;
}
</style>
<!--[if IE]>
/* Conditional styles applied in IE only to work around cross-browser bugs */
<style>
label input#myCheckbox {
visibility: visible;
z-index: 2;
}
</style>
<![endif]-->
<script type="text/javascript">
$(function() {
$("#toggleCheckbox").click(function() {
$(this).closest("label").css({ borderStyle: this.checked ? 'inset' : 'outset' });
});
});
</script>
</head>
<body>
<form action="http://www.w3schools.com/html/html_form_action.asp" method="get">
<label for="toggleCheckbox">
<input type="checkbox" name="toggled" id="toggleCheckbox" value="1" />
Toggled?</label>
<input type="submit" name="verb" value="Submit Form" />
</form>
</body>
</html>
Problem
I need to represent a toggle button in HTML. My intention is to do it with a normal input submit button and styling. Any recommendations on how to style a toggle button that is understandable and works more or less in all browsers?