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. 我读《大数据时代的IT架构设计》

    架构设计是一门艺术,对架构的掌握要通过多看,多学,多交流,多积累,从实战架构上总能吸收到很好的营养,这边书虽然 (一).hadoop技术处理电信行业的上网日志 根据上网的url或未知url爬取内容,进 ...

  2. 不要怂,就是GAN (生成式对抗网络) (五):无约束条件的 GAN 代码与网络的 Graph

    GAN 这个领域发展太快,日新月异,各种 GAN 层出不穷,前几天看到一篇关于 Wasserstein GAN 的文章,讲的很好,在此把它分享出来一起学习:https://zhuanlan.zhihu ...

  3. C语言基础第一次作业

    一,1)大学和高中最大的不同是没有人天天看着你,请问大学理想的师生关系是?有何感想? 看了邹欣老师博客中写到的教学基础——师生关系后陷入沉思,邹欣老师在她的博客中直接否认了传统认知的师生关系——蜡烛, ...

  4. BPNN

    链接网址:http://blog.csdn.net/heyongluoyao8/article/details/48213345 BPNN 人工神经网络   我们知道,人的脑袋具有很强的学习.记忆.联 ...

  5. linux源码安装php7.2.0

    1. 源码包下载地址 2. 解压php压缩包 tar –zxvf php-7.2.0.tar.gz 3. 进入解压后的 cd php7.2.0 4.安装php需要的扩展 yum install lib ...

  6. Java® Language Specification

    Java™ Platform, Standard Edition 8 API Specification http://docs.oracle.com/javase/8/docs/api/ The J ...

  7. 安装Android SDK Manager的“Failed to fetch refused”问题解决方法

    安装Android SDK Manager的"Failed to fetch refused"问题解决方法 一见 2014/11/11 问题现象: 步骤一:修改hosts文件(wi ...

  8. C++创建自己的库文件(dll文件创建和编译)

    创建编译库文件有个好处就是不容易被修改,加密的,方便调用,但是缺点是不容易查看其中的内容,反编译比较麻烦.下面让我们使用VC创建编译自己的库文件吧.常用的函数,不常更改的,应该放到库文件里,所以库文件 ...

  9. IOC容器基本原理

    1  IoC容器的概念 IoC容器就是具有依赖注入功能的容器,IoC容器负责实例化.定位.配置应用程序中的对象及建立这些对象间的依赖.应用程序无需直接在代码中new相关的对象,应用程序由IoC容器进行 ...

  10. 一个例子教你理解java回调机制

    网上很多例子都写的很难理解,笔者刚开始都已经弄晕菜了. 这个例子,应该是再简单,再简洁不过的了,例子目的是测试某个方法的执行时间.这里就写三个java类,一个接口,一个实现,还有一个用于测试时间的类. ...