标签元素作用总结

标签与输入的关联机制

标签用于关联表单元素。实现代码如下：

性别

模拟按钮

使用“模拟”按钮标签解决不同浏览器原生按钮不同的问题

实现代码如下：

 
按钮


输入[类型='按钮'] {
  显示：无；
}

标签 {
  显示：内联块；
  内边距：10px 20px；
  背景：#456；
  颜色：#fff；
  光标：食指；
  框阴影：2px 2px 4px 0 rgba(0,0,0,.3);
  边框半径：2px；
}

结合CSS状态开关

结合checkbox和radio表单元素来实现纯CSS状态切换的例子太多了。例如控制CSS动画的播放和停止。下面是部分代码。详细实例地址

  

  





...#controller：检查〜.animation {
  动画游戏状态：已暂停；
}
...

标签实现标签开关

输入的焦点事件将触发锚点定位。我们可以使用label作为触发器来实现tab切换的效果。以下代码选自张鑫旭《CSS世界》。项目链接

  
1
  
2
  
3
  
4


  1
  2
  3
  4



。盒子 {
  宽度：20em；
  高度：10em；
  边框：1px实线#ddd；
  多余的：隐藏的；
}
。列表 {
  高度：100%；
  背景：#ddd；
  文本对齐：居中；
  位置：相对；
}.列表>输入{
  位置：绝对；向上：0；
  高度：100%；宽度：1 像素；
  边框：0；分割：0；保证金：0；
  剪辑：矩形（0 0 0 0）；
}