以前我实现单选变色几乎都是用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. B. Vasya and Isolated Vertices

    链接 [http://codeforces.com/contest/1065/problem/B] 题意 给你n个点,m条边,让你找最多孤立点和最少孤立点,不能有自环路 分析 对于最少max(0,n- ...

  2. M1阶段个人总结

    经过4周的开发,我们团队的第一阶段已经结束了. 这一个月来我由于其他事情较多,所以开发的工作主要交给了另外的三名同学. 我主要负责制定代码规范和工程结构,通过github来跟进项目进度,提供一些技术支 ...

  3. Linux内核学习期末总结（网课）

    标签(空格分隔): 20135321余佳源 余佳源(原创作品转载请注明出处) <Linux内核分析> MOOC课程http://mooc.study.163.com/course/USTC ...

  4. C#JSON与XML转换

    C#JSON转XML 输入:[{\'name\': \'yancy\',\'value\': \'0\'},{\'name\': \'jieny\',\'value\': \'1\'}] string ...

  5. springboot整合fastJson遇到重定向问题

    通过网上教程使用springboot整合fastJson后遇到页面重定向问题(使用的springboot版本是2.0.2.RELEASE ,其他的版本可能不会出现以下问题),如下图: 我的项目结构如下 ...

  6. git体会

    刘仙臣个人github链接:http://www.github.com/liuxianchen 这次作业学会了关于git的一些基本操作,学习了到了许多东西,为以后的学习奠定了基础,激发了学习的兴趣.具 ...

  7. C++高质量编程笔记

    /* * 函数介绍: * 输入参数: * 输出参数: * 返回值 : */ void Function(float x, float y, float z) { - } if (-) { - whil ...

  8. solr6.2单机版安装

    1安装solr服务,先安装jdk和tomcat 2去官网(http://archive.apache.org/dist/lucene/solr/)下载solr压缩包,最新版本是6.4.1,下载解压后, ...

  9. [2017BUAA软件工程]第0次作业

    第一部分:结缘计算机 1. 你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 选择计算机专业的一个重要原因是因为计算机专业的就业前景好,由于计算机本身具有的各种优点,现在几乎所有的 ...

  10. K3CLOUD安装教程

    1.安装SQLSERVER2008 2.安装K3CLOUD安装包,此处各种安装iis,tomcat,ftp等环境,有过it经验的应该都能自己搞定,不详细赘述 3.进入管理中心,进行设置,默认为127. ...