HTML切换按钮_html-js-css

概述我需要在 HTML中表示切换按钮.我的意图是使用正常的输入提交按钮和样式.关于如何设置切换按钮的样式的任何建议都是可以理解的,并且在所有浏览器中或多或少都有效？由于您使用true / false状态表示单个控件,因此您确实希望使用复选框作为底层表单元素,以保持与下层浏览器,屏幕阅读器等的兼容性.这里的一种方法是将标签控件与复选框相关联,然后使用CSS和jQuery的组合使实际复选框本身“不可见” 我需要在 HTML中表示切换按钮.我的意图是使用正常的输入提交按钮和样式.关于如何设置切换按钮的样式的任何建议都是可以理解的,并且在所有浏览器中或多或少都有效？解决方法由于您使用true / false状态表示单个控件,因此您确实希望使用复选框作为底层表单元素,以保持与下层浏览器,屏幕阅读器等的兼容性.这里的一种方法是将标签控件与复选框相关联,然后使用CSS和jquery的组合使实际复选框本身“不可见”,将标签呈现为按钮,并在选中复选框时修改标签的border属性或未选中.

此代码适用于Chrome,Safari,Opera,firefox和IE(感谢条件评论黑客,因为IE将隐藏的表单元素与其他浏览器区别对待).如果您提交封闭表单,则会在生成的表单提交中获得普通的HTML复选框行为.

<!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 @R_404_5554@ </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 @R_404_5554@ */           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="@R_404_5555@" name="verb" value="@R_404_5555@ Form" />      </form> </body> </HTML>

总结

以上是内存溢出为你收集整理的HTML切换按钮全部内容，希望文章能够帮你解决HTML切换按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1145065.html