以前我实现单选变色几乎都是用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. Centos下PPTP环境部署记录

    PPTP(点到点隧道协议)是一种用于让远程用户拨号连接到本地的ISP,通过因特网安全远程访问公司资源的新型技术.它能将PPP(点到点协议)帧封装成IP数据包,以便能够在基于IP的互联网上进行传输.PP ...

  2. webvirtmgr-重命名kvm虚拟机的名称

    之前部署了Webvirtmgr平台管理kvm虚拟机,由于虚拟机在创建时名称是顺便起的,后续在虚拟机上部署了部分业务.为了便于管理,最好将虚拟机的名称重置下. 现在说下如何修改kvm中虚拟机的名称: 比 ...

  3. AnyProxy做App网络流量测试

    前言: AnyProxy是一个开放式的HTTP代理服务器.Github主页:[https://github.com/alibaba/anyproxy]主要特性包括: 基于Node.js,开放二次开发能 ...

  4. HAOI2016 找相同字符 后缀自动机

    两个串,考虑一建一跑.枚举模式串的位置\(i\),考虑每次统计以\(i\)结尾的所有符合要求的串.在后缀自动机上走时记录当前匹配长度\(curlen\),则当前节点的贡献是\((curlen-len[ ...

  5. 《linux内核设计与实现》读书笔记——第三章

  6. sprint最后冲刺-out to out

    摘要:团队合作.实现四则APP,上传代码到github. 1.之前我们队一直无法把代码上传到github.直到今天.找到了一种可以协助代码上github的软件msysgit. 经过:(一行行看) 我们 ...

  7. 阅读<构建之法>第10、11、12章

    第10章 典型用户和场景 10.2 规格说明书 10.3 功能驱动的设计 问题:怎样写好spec?功能驱动设计的功能设计阶段怎样实现一个具体的功能? 第11章 软件设计与实现 11.2开发阶段的日常管 ...

  8. XMLHttpRequest.withCredentials

    https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials var xhr = new XMLHtt ...

  9. Chrome 启动参数列表

    "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --type=gpu-process --channel ...

  10. matplotlib之scatter自动绘制散点

    # 使用matplotlib.pyplot.scatter绘制散点 import matplotlib.pyplot as plt from pylab import mpl # 设置默认字体,解决中 ...