以前我实现单选变色几乎都是用js实现的，今天看到有个css属性可以直接实现单选变色，很开心啊~

话不多说看效果

实现的代码如下


下面我们看看用focus实现别的有趣的效果

话不多说看效果

实现的代码如下


css实现单选效果，看看有趣的tabIndex的更多相关文章

  1. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  2. 一种巧妙的使用 CSS 制作波浪效果的思路

    在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思 ...

  3. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  5. ios UIButton设置单选效果，以及同时设置图片和标题

    一,设置单选效果 - (void)selectedBtnPress:(UIButton*)sender { //首先把原来按钮的选中效果消除 for (int i=0;i<num;i++) {/ ...

  6. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  7. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  8. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  9. checkbox 实现单选效果（html）

    note:在html <input> 标签类中的checkbox实现单选效果. 在最近的开发项目中,客户要求使用小方格子实现“单选”功能,显然圆点的radio被out了,只能选择chckb ...

随机推荐

  1. vim命令记录

    最近开始用vim作为日常编辑器,由于vim的命令过多,现在记录一下

  2. Linux内核分析第六周总结

    进程控制块PCB--task_struct 操作系统的内核里的三大功能: 进程管理 内存管理 文件系统 进程描述符--task_struct 进程管理是最核心的内容 然而Linux进程的状态与操作系统 ...

  3. SQL语句及5.7.2 mysql 用户管理

    一.用户的定义 1.1 用户名+主机域 此处为5.7.2版本的mysql当中password字段已改为authentication_string mysql> select user,host, ...

  4. Tomcat7解决java.lang.OutOfMemoryError: PermGen space

    上述两参数,可根据实际情况,逐渐调大.

  5. HTML使用button的一个小坑

    https://www.w3schools.com/TAGs/att_button_type.asp Definition and Usage The type attribute specifies ...

  6. React 表单refs

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. FICO基础知识（一）

    GL – 总账 (General Ledger) 总帐核算的中心任务是提供外部会计及其所涉及帐户的概貌. 总账会计主要用途:根据不同的会计准则(如欧洲的 IAS, 美国的GAAP, 中国国家会计准则) ...

  8. HTTP消息头（HTTP headers）－常用的HTTP请求头与响应头

    HTTP消息头是指,在超文本传输协议( Hypertext Transfer Protocol ,HTTP)的请求和响应消息中,协议头部分的那些组件.HTTP消息头用来准确描述正在获取的资源.服务器或 ...

  9. loadrunner基础学习笔记四

    在loadrunner中,通过将一系列操作标记为事务,可以将它们指定为要评测的操作. loadrunner收集关于事务执行时间长度的信息,并将结果显示在用不同单色标识的图和报告中. 可以这些信息了解应 ...

  10. Qt ------ 覆盖eventFilter()，捕获组件事件，事件处理

    在Qt中,当一个事件发生时(例如鼠标点击或某个键盘上的按键按下),其传递顺序如图所示.从这个图可以看出,事件过滤器首先获得事件,其次才是部件的 event 函数,最后是部件的事件处理函数 事件过滤器由 ...