以前我实现单选变色几乎都是用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. 2019年以后ArcGIS 调用天地图的资源URL

    2019年1月1日起,天地图做出如下变更,导致直接在Arcgis/ArcMap中添加WMTS服务不能用了. 国家天地图解释的很清楚,注册个人用户就可以了. 原有调用方式不变,只要在URL 后添加“&a ...

  2. SpringBoot笔记--Jackson

    SpringUtil.getBean<GenericConversionService>().addConverter(Date2LocalDateTimeConverter()) var ...

  3. [ERROR] Fatal error: Please read "Security" section of the manual to find out how to run mysqld as root!

    测试mysqld启动mysql server的时候,报如下错误: 2015-12-17 00:46:02 10785 [ERROR] Fatal error: Please read "Se ...

  4. 软工个人博客作业Week 1

    问题1:在瀑布模型中提到模型,模型(模拟版本)和原型有什么不同,如果与原型有同样的功能,那为什么称之为模型?如果没有同样的功能,又是怎么测试那些程序的? 问题2:怎样才能高效率的广泛而深入地了解用户的 ...

  5. 20135337——实践一：Linux基础配置

    一.配置系统,权限中简单梳理遇到的问题 1.Ubuntu中root和普通用户相互切换 1.从user用户切换到root用户 执行:sudo su 2.从root用户切回user用户 执行:su use ...

  6. Golang 入门~~基础知识

    变量声明 //通用形式,指定变量名,变量类型,变量值 var name int = 99 fmt.Println(name) //指定变量名,以及变量类型,未指定值的时候默认是类型零值 var age ...

  7. TCP的TIME_WAIT

    http://www.cnblogs.com/dadonggg/p/8778318.html http://www.firefoxbug.com/index.php/archives/2795/ ht ...

  8. Appium学习笔记1_获取到APK安装包的Package以及Activity属性值

    我们设置DesiredCapabilities属性值得时候需要设置"appPackage"和"appActivity",如何获取到这两个值呢? 这两个值不是随便 ...

  9. 【转帖】2018年Windows漏洞年度盘点

    2018年Windows漏洞年度盘点丨老漏洞经久不衰,新0day层出不穷 腾讯电脑管家2019-02-12共17875人围观 ,发现 1 个不明物体网络安全资讯 https://www.freebuf ...

  10. git常用命令及用法小计

    git init 初始化一个本地git仓库repository git status 查看状态 git add <file> 将工作区修改加到暂存区(stage) git commit - ...