Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用checkbox实现无JS的Switch控件

  之前的文章中有介绍过使用checkbox来控制其后元素样式的用法。但当时的测试代码写的比较糟糕。主要问题是代码中把所有东西都放入了label中,这可能会导致一些浏览器上不兼容;或者是在点击控件进行一些鼠标操作时浏览器会把焦点设置到checkbox上。
  我们不该在label中放太多东西。在这里,我们使用的label最好里面只放文字,不放别的东西,让它和其它控件在DOM树中不是父子关系。这样点击操作才能够明确的对应到我们需要的地方。这种情况我们应该使用它的for属性。比如同样实现点击文字来控制文本框可见性的程序,我们也许可以这样写。
<style>
.test {font:14px/2 微软雅黑;}
.test label {cursor:pointer}
.test label:before {content:'点我显示文本框';}
.test label:hover {color:#C30;}
.test input {display:none;}
.test :checked~input {display:inline-block;}
.test :checked~label:before {content:'点我隐藏文本框';}
</style>
<div class="test">
  <input id="switch" type="checkbox" />
  <label for="switch"></label>
  <input />
</div>
  另外,这里再提供一个更美好的实例,使用这个方法来实现Switch控件(兼容到IE9): <style>
#switch {display:none;}
#switch+label {
  display:block;
  position:relative;
  border:1px solid #CCC;
  border-radius:6px;
  width:80px;height:24px;
  font:12px/2 微软雅黑;
  cursor:pointer;
  box-shadow:inset 0px 0px 3px #CCC;
}
#switch+label:before {
  position:absolute;top:-1px;
  width:70%;height:100%;background:#eee;
  text-align:center;
  border:1px solid #CCC;
  border-radius:6px;
  box-shadow:0px 0px 3px #999;
  transition:all 500ms ease;
}
#switch+label:before {
  content:'已关闭';
  background:#FFEAD5;
  border-color:#AF6114;
  left:-1px;
}
#switch:checked+label:before {
  content:'已开启';
  background:#EAFFD5;
  border-color:#61B014;
  margin-left:-1px;
  left:30%;
}
</style>
<input id="switch" type="checkbox" />
<label for="switch"></label>
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^