表单的label标签的使用技巧

先看下面的代码:

Image1.png

效果:

Image2.png

在点击文字时,选框会被自动选中,

  ①,增加了文字与选框的关联性

  ②,减少js的使用,例如我使用的angular,关于效果的js比较难写,下面这个例子就是我使用的一个方法
Image3.png
  这个就是使用这个技巧写的,input被想办法隐藏掉,至于选中之后效果的切换css可以这样写:

  ul#tabs [id^="tab"]:checked + label{}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,939评论 25 708
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,498评论 0 17
  • 回家的路上,我抬头,看了一眼小城的天空,月亮如往常一样悬在我的头顶,小区里父与子追逐嬉戏的身影却变了模样。我打...
    青晚DDB阅读 198评论 0 1
  • 1.二胎 我:若生二胎,你可有时间多陪伴我和孩子? 夫:没有,我不想骗你。我工作的确很忙,总不能不工作吧?我只能说...
    纪念与记念阅读 208评论 0 0
  • 今日立秋了,不过天气可并没有凉爽下来的意思,因为还在三伏天~ 这听起来好矛盾,我无法解释这个理论,只知道是因为有个...
    百合手工阅读 306评论 1 3