以前我实现单选变色几乎都是用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. ssh实现办公室电脑连接家中的电脑

    友情提示:如果您不知道您家路由器管理页面的密码,请您忽略此文. 问题背景: 家中有台笔记本电脑,它是通过家中的路由器与外界联网的,这时,我想通过ssh服务让公司的电脑能连上我家中的笔记本. 可以画个图 ...

  2. python-深浅copy-18

    # 赋值运算l1 = [1,2,3]l2 = l1l1.append('a')print(l1,l2) # [1, 2, 3, 'a'] [1, 2, 3, 'a'] #copyl1 = [1,2,3 ...

  3. 作业20171102 alpha-review 成绩

    申诉 对成绩有疑问或不同意见的同学,请在群里[@杨贵福]. 申诉时间截止2017年12月12日 17:00. 成绩 review NABCD-评论 SPEC-评论 例行报告 附加分数 合计 本周归一化 ...

  4. Android之JSON格式数据解析

    查看原文:http://blog.csdn.net/hantangsongming/article/details/42234293 JSON:JavaScript 对象表示法(JavaScript ...

  5. C#-ToString格式化

    Int.ToString(format): 格式字符串采用以下形式:Axx,其中 A 为格式说明符,指定格式化类型,xx 为精度说明符,控制格式化输出的有效位数或小数位数,具体如下: 格式说明符 说明 ...

  6. pandas重新索引

    #重新索引会更改DataFrame的行标签和列标签.重新索引意味着符合数据以匹配特定轴上的一组给定的标签. #可以通过索引来实现多个操作 - #重新排序现有数据以匹配一组新的标签. #在没有标签数据的 ...

  7. Java之JSON操作（Jackson）

    Java to JSON: package json.jackson; import bean.User; import com.fasterxml.jackson.databind.ObjectMa ...

  8. linux 为tomcat指定jdk

    Linux为Tomecat指定JDK   在搭建Jenkin+Sonar集成时,由于系统环境配置了jdk1.7,但是jenkins在安装sonar的插件时,需要jdk1.8.,所以需要在Tomcat指 ...

  9. Classification with DeepLearning

    分类网络总结 https://github.com/handong1587/handong1587.github.io/blob/master/_posts/deep_learning/2015-10 ...

  10. HTML-XML数据解析

    HTML代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...