.magic-radio{
position: absolute;
display: none;
} .magic-radio + label {
position: relative;
display: block;
padding-left: 30px;
cursor: pointer;
vertical-align: middle;
padding-left: 1.5rem !important;
min-width: auto !important;
}
.magic-radio:checked + label:before {
background: #3e97eb;
border-color: #3e97eb;
}
.magic-radio + label:before {
border-radius: 50%;
}
.magic-radio + label:before {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 25px;
height: 25px;
content: '';
border: 1px solid #c0c0c0; } .magic-radio:checked + label:after{
display: block;
}
.magic-radio + label:after {
top: 5px;
left: 10px;
box-sizing: border-box;
width: 8px;
height: 15px;
transform: rotate(45deg);
border-width: 2px;
border-style: solid;
border-color: #fff;
border-top: 0;
border-left: 0; }
.magic-radio + label:after{
position: absolute;
display: none;
content: '';
}

html:

<div class="opt" >
<input class="magic-radio" type="radio" name="radio" id="r1" value="option1">
<label for="r1">男</label>
</div>

最终效果:

css3美化radio样式的更多相关文章

  1. css3美化滚动条样式

    1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...

  2. 纯CSS3美化radio和checkbox

    如题,主要通过CSS3来实现将radio和checkbox美化的效果.可是兼容性并非非常好,PC端仅仅支持chrome浏览器(IE和Firefox測试不行,其它没有很多其它測试).然后微信端和QQ端訪 ...

  3. 纯CSS3美化单选按钮radio

    这种纯CSS3美化单选按钮radio的方法适用于以下情况: 1.可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉 2.只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出 ...

  4. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  5. CSS3美化表单 移动端可用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

  7. 使用css3美化复选框

    声明:文章为转载(略改动),点击查看原文.如有侵权24小时内删除,联系QQ:1522025433. 我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...

  8. 用纯CSS美化radio和checkbox

    Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...

  9. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

随机推荐

  1. detach()之大坑:detach会引起局部变量失效引起线程对内存的非法访问题。

    detach()之大坑:detach会引起局部变量失效引起线程对内存的非法访问题.一:传递临时对象作为线程参数(1.1)要避免的陷阱(解释一)(1.2)要避免的陷阱(解释一)事实一:只要用临时构造的A ...

  2. 【2013 ICPC亚洲区域赛成都站 F】Fibonacci Tree(最小生成树+思维)

    Problem Description Coach Pang is interested in Fibonacci numbers while Uncle Yang wants him to do s ...

  3. ABAP术语-Sales Order

    Sales Order 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/14/1104979.html A customer request ...

  4. Python Monitoring UPS with SNMPWALK

    ##Background My co-worker told me he needed to monitor UPS with SNMP module but he only can get hexa ...

  5. java的值传递机制

    一.练习:编写Java程序,将二维数组中的行列互调显示出来. 代码1为自己编写: package com.xxgpra.CH6; public class Hangliehudiao_pra4 { p ...

  6. python学习笔记:第14天 内置函数补充和递归

    一.匿名函数 匿名函数主要是为了解决一些简单需求而设计的一种函数,匿名函数的语法为: lambda 形参: 返回值 先来看一个例子: # 计算n的n次方 In[2]: lst = lambda n: ...

  7. 1.Python是什么

    前言   这里只是根据个人的理解而谈,庸俗浅薄,不是科学定义,也可以认为是假装自己理解啦,掩耳盗铃罢了.知无涯是多么的恐怖,哈哈 计算机语言   此处的语言不同于我们生活中所说的语言,因为生活中的语言 ...

  8. Python学习手册之类和继承

    在上一篇文章中,我们介绍了 Python 的函数式编程,现在我们介绍 Python 的类和继承. 查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/100106 ...

  9. [转]Visual C++ 和 C++ 有什么区别?

    注:本篇内容转载与网络,方便自己学习,如有侵权请您联系我删除,谢谢. 有位同学问我“Visual C++和C++有什么区别?”,这的确是初学者会感到困惑的问题,比较常见.除此之外,还有“先学C++好, ...

  10. 009---linux进程管理

    进程管理 top 查看运行状态:top 查看cpu核心数:top and 1 查看cpu占用率最大:top and P free 查看内存状态:free 以M为单位:free -m 以G为单位:fre ...