coding style - HTML toggle buttons -

I need to represent a toggle button in HTML. I intend to do a normal input with submit button and style . How is it that how to style a toggle button and more or less work in all browsers?

Since you are representing a control with a true / false situation, then you actually Downlive Browsers want to use a checkbox as the built-in form element to maintain compatibility with the screen reader and so on. Here is a label control affiliate with an approach checkbox, and then to use the combination of CSS and JQ to create the 'real' checkbox 'invisible', presenting the label as a button, and labeling the property to the property Modify because checkboxes are checked or unchecked.

This code works in Chrome, Safari, Opera, Firefox and IE (IE is due to conditional comment hack because IE treats hidden form elements differently for other browsers). If you submit the attached form, you get the normal HTML checkbox behavior as a result.

  & lt ;! DOCTYPE html public "- // W3C // DTT XHTML 1.0 Transcriptional // N" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?Ltml xmlns = "http : //www.w3.org/1999/xhtml "> gt; Top & gt; & gt; title & gt; jQuery toggle button & lt; / title & gt; & lt; script type =" text / Javascript "src =" http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js "> gt; script & gt; & lt; style type =" text Style the label / CSS "& gt; / * so that it looks like a button * / label (range: 2px start #cccccc; background color: #cccccc; position: relative; Z-index : 3; padding: 4px;} / * checkbox to disappear CSS (but remain functional) * / label input {status: absolute: visibility: hidden;} & lt; / style & gt; & lt ;! - [If IE] & gt; / * Conditional styles are only applicable for working in cross browser for IE browser * / & gt; style & gt; label input # myCheckbox {visibility: visible; Z-index: 2 ;} & Lt; / style & gt; & lt; [endif] - & gt; & Lt; Script type = "text / javascript" & gt; Click $ (function () {$ ("# toggleCheckbox") (function () {$ (this) .closest ("label"). CSS ({borderStyle: this.checked? 'Inset': 'initial'}) ;});}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Form action = "http://www.w3schools.com/html/html_form_action.asp" method = "find" & gt; & Lt; Label = "toggleCheckbox" & gt; & Lt; Input type = "checkbox" name = "toggled" id = "togglecheckbox" value = "1" /> ? Toggle & lt; / Labels & gt; & Lt; Input type = "submit" name = "action" value = "submit form" /> & Lt; / Form & gt; & Lt; / Body & gt; & Lt; / Html & gt;