ansaurus

Question

HTML toggle buttons

Answer 1

+1 A:

There are some great items in this question right here. But it's not exactly a duplicate, though close. (Since you want an input button)

Ólafur Waage 2009-10-17 17:28:51

Thanks. Unfortunately, styling input elements, seems to be much harder than styling anchors.

J. Pablo Fernández 2009-10-17 17:30:14

Aye since input elements have a look inherit from the browser.

Ólafur Waage 2009-10-17 17:34:43

Answer 2

+1 A:

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"&gt;
 <html xmlns="http://www.w3.org/1999/xhtml"&gt;
 <head>
      <title>jQuery Toggle Button </title>

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

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

Dylan Beattie 2009-10-17 18:15:45

ansaurus

tags:

views:

answers:

HTML toggle buttons

related questions