html:
<div>
<input id="item1" type="radio" name="item" value="选项一" checked>
<label for="item1"></label>
<span>选项一</span>
</div>
<div>
<input id="item2" type="radio" name="item" value="选项二">
<label for="item2"></label>
<span>选项二</span>
</div> css: div {
position: relative;
line-height: 30px;
} input[type="radio"] {
width: 20px;
height: 20px;
opacity: 0;
} label {
position: absolute;
left: 5px;
top: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #999;
       cursor: pointer;
} /*设置选中的input的样式*/
/* + 是兄弟选择器,获取选中后的label元素*/
input:checked+label {
background-color: #fe6d32;
border: 1px solid #fe6d32;
}
 /*添加的加号与label进行拼接(一个矩形边框去掉上和左的边框),再旋转45度*/
input:checked+label::after {
position: absolute;
content: "";
width: 5px;
height: 10px;
top: 3px;
left: 6px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);

js:获取到checked的状态

$('#item1').click(function(){
  console.log($(this).prop('checked'))
})

  

HTML自定义radio单选按钮(纯css版,样式可以随意改变)的更多相关文章

  1. 纯CSS菜单样式,及其Shadow DOM,Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  2. 自定义常用input表单元素二:纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  3. 画线动画——SVG版和纯CSS版

    概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...

  4. 利用radio实现纯css选项卡切换

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAABCCAIAAAD18aaXAAAG70lEQVR4nO3dO5KrPBCGYRY0VV4OEX

  5. 常见Z纯CSS小样式合集(三角形)

    三角形 .sanjiao{ width:0px; height: 0px; overflow: hidden; border-width: 100px; border-color: transpare ...

  6. 纯CSS箭头,气泡

    原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...

  7. radio样式的写法,单选和多选如何快速的改变默认样式,纯CSS,

    一.纯CSS写法改变单选框的默认选择样式,用背景图片代替 input[type='radio']:radio:before { content: '';//这里需要有 width: 20px; hei ...

  8. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  9. 自定义常用input表单元素一:纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

随机推荐

  1. 一张图包含SEO一切要点

    看到一张好图 from http://www.rongyipiao.com/?p=8

  2. [Vuejs] 点击单选框触发两次点击事件的处理

    <el-radio-group v-model="uploadStatus" class="upload-status-radio"> <el ...

  3. IDEA 一次启动多个微服务模块项目

    1,打开IDEA项目 .idea 下 的workspace.xml 2,查找“RunDashboard” 节点 3,添加如下内容 <option name="configuration ...

  4. 交换机安全学习笔记 第九~十章 HSRP VRRP

    HSRP  (Hot Standby Router Protocol) 热备份路由器协议 思科私有 HSRP消息使用UDP 端口号 1985(IPv6时为2029) 使用多播地址 224.0.0.2( ...

  5. 小记---------Elasticsear搭建

    Elasticsear搭建 创建用户: useradd elasticsearch passwd elasticsearch   1.解压 tar -zxvf elasticsearch-5.5.2. ...

  6. py3.7安装Scrapy及安装时的 Running setup.py install for Twisted ... error 和安装后的 Unhandled error in Deferred:

    1.首先,win+r 进入cmd,打开命令提示符,输入  pip install scrapy  等待自动安装: 2.到了后半段会出现  Running setup.py install for Tw ...

  7. 插入数据库失败([Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version)

    报错信息如下: , ) 原因,read是数据库的关键字, 牢记,如果一个词是数据库的关键字,那么在写数据库语句的时候,这个词一定是蓝色的(关键字颜色)!!

  8. Git_初步了解

    Git入门篇 一:Git是什么?Git是目前世界上最先进的分布式版本控制系统.工作原理 / 流程: Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库 ...

  9. 组合&多态&封装

    目录 组合&多态&封装 一.组合 1.1什么是组合 1.2 为什么要用组合 1.3 如何使用组合 1.4 继承和组合都在什么时候用 二.多态与多态性 2.1 什么是多态 2.2 如何用 ...

  10. NlData初学者开发篇(ORM)

    一, 简介:NlData是一个个人开发的ORM,为了学习而学习,是基于表达式实现的一个ORM 二,先简单介绍使用,如下,配置是统一接口 NlClient client = new NlClient(n ...