以前我实现单选变色几乎都是用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. xmlSpy套件（Altova MissionKit 2016）的Ollydbg调试过程及破解

    最近工作需要用到XML处理软件,网上找到Altova MissionKit 2016( 包含了XmlSpy.MapForce.StyleVision.UModel.DatabaseSpy等工具),用了 ...

  2. Tomcat通过Redis实现session共享的完整部署记录

    对于生产环境有了一定规模的tomcat集群业务来说,要实现session会话共享,比较稳妥的方式就是使用数据库持久化session.为什么要持久化session(共享session)呢?因为在客户端每 ...

  3. Mac下通过VMware Fusion安装centos虚拟机操作记录

    下面介绍下利用VMware Fusion工具在Mac上安装centos虚拟机的做法:1)下载VMware Fusion工具下载地址(包括注册码):http://www.macx.cn/thread-2 ...

  4. Nginx负载均衡中后端节点服务器健康检查的操作梳理

    正常情况下,nginx做反向代理,如果后端节点服务器宕掉的话,nginx默认是不能把这台realserver踢出upstream负载集群的,所以还会有请求转发到后端的这台realserver上面,这样 ...

  5. Redis日常操作命令小结

    Redis缓存服务是运维工作中比较常见的一种维护工作,下面就redis日常操作命令在此做一简单小结,以备查用: 1)连接redis服务命令# redis-cli -h redis主机ip或主机域名 - ...

  6. 《Linux内核设计与实现》第四章学习笔记

    <Linux内核设计与实现>第四章学习笔记           ——进程调度 姓名:王玮怡  学号:20135116 一.多任务 1.多任务操作系统的含义 多任务操作系统就是能同时并发地交 ...

  7. 《Linux内核设计》第17章学习笔记

  8. zookeeper安装(Linux)

    安装环境: Linux:centos6.4 Jdk:1.7以上版本 Zookeeper是java开发的可以运行在windows.linux环境.需要先安装jdk. 安装步骤: 第一步:安装jdk 第二 ...

  9. Eclipse:An internal error occurred during: "Building workspace". GC overhead limit exceeded

    http://blog.csdn.net/shaozhang872196/article/details/18552273 http://www.cnblogs.com/sonofelice/p/52 ...

  10. mysql distinct 去重

    在使用MySQL时,有时需要查询出某个字段不重复的记录,这时可以使用mysql提供的distinct这个关键字来过滤重复的记录,但是实际中我们往往用distinct来返回不重复字段的条数(count( ...