html部分:

<input id="item2" type="radio" name="item">
<label for="item2"></label>

abel for属性规定与表单元素绑定
radio单选框, 相同的name名字可以达到互斥的作用

CSS部分:

input[type="radio"] {
opacity:; //设置透明度,隐藏原有input样式
}
label {
position: absolute;
left: 90%;
top: 10px;
width: 20px;
height: 20px;
border: 1px solid #999;
}
input:checked+label { 相邻同胞选择器,选择被选中的input标签后 第一个label标签 [input 和 label标签有共同的父元素];
background-color: #ff3334;
border: 1px solid #ff3334;
}

css样式会应用在紧随着 "勾选的input元素" 后面(同级)的 " label元素的:after "上。
也就是说,input框如果被用户勾选了,其后面的label元素会有相应的样式变化

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);
}

实现效果:

参考文章: https://www.jianshu.com/p/d3ad2d76f039

利用CSS 修改input=radio的默认样式(改成选择框)的更多相关文章

  1. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  2. css修改select下拉列表的默认样式

    select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...

  3. css 更改input radio checkbox的样式

    html <label> <input type="checkbox" class="colored-blue"> <span c ...

  4. CSS修改input[type=range]滑块样式

    input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...

  5. css取消input、select默认样式(手机端)

    IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...

  6. <input type='file'/>把默认样式改成框框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. css自定义 range radio select的样式滑轮,按钮,选择框

    写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...

  8. 【转】html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...

  9. html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...

随机推荐

  1. SQL group by 分组后,同一组的排序后取第一条

    SELECT * FROM(                SELECT                     [SPID]                    ,[PH1]           ...

  2. JSON.parse()和JSON.stringify()的使用

    parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":&qu ...

  3. foo是什么?

    在英文程序员社区里,foo bar baz这些词是常用于作为占位符而使用的.要查wiki的话,这项更合适:http://en.wikipedia.org/wiki/Metasyntactic_vari ...

  4. Appium之uiautomator定位元素

    元素定位方式有多种,Android也有自身独有的定位方式.下面就单独介绍其基于uiautomator定位元素的方法: 基本语法: driver.find_element_by_android_uiau ...

  5. CYUSB3014固件部分低版本工程在Eclipse中编译得到img文件时无效的解决方案

    最近在做基于我们AC6102开发板的UVC图像视频方案,下载了官方的an75779应用工程,但是倒入到FX3—SDK自带的Eclipse中后,却无法编译生成img文件,经过比对后确认是生成该文件的命令 ...

  6. asp.net部署时加密config文件

    1:运行cmd,并定位到C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727(可以直接运行vs2005的命令提示工具,但是貌似vs2010默认指向的framewo ...

  7. FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG

    发现FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG,提交的表名大小写是敏感的. 只要有一个表名字母的大小写不匹配,ORACLE就会认为是一个不认 ...

  8. ASP.NET Core2集成Office Online Server(OWAS)实现办公文档的在线预览与编辑(支持word\excel\ppt\pdf等格式)

    Office Online Server是微软开发的一套基于Office实现在线文档预览编辑的技术框架(支持当前主流的浏览器,且浏览器上无需安装任何插件,支持word.excel.ppt.pdf等文档 ...

  9. osx上使用'cd'命令跳转到别名(alias)目录

    在mac上使用windows的共享目录时,在terminal中时法使用cd的,会提示"xxx 不是目录",经过一番的查找,发现了Mac Terminal 'cd' to folde ...

  10. [Erlang34]erlang.mk的源码阅读1-入门makefile

    通过erlang.mk项目,掌握基本的makefile语法,可以自己定制makefile. 1. makefile 基本规则: 1. 所有的源文件没有被编译过,则对各个源文件进行编译并进行链接,生成最 ...