<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>自定义单选框radio样式</title>

</head>

<style>

    body { margin: 0; }

    input { padding: 0; margin: 0; border: 0; }

    .female, .male { position: relative; /* 设置为相对定位，以便让子元素能绝对定位 */ height: 40px; line-height: 40px; margin-left: 40px; }

    .sex label { display: block; height: 40px; width: 40px; line-height: 40px; font-size: 20px; cursor: pointer; }

    .sex input { z-index: 3; position: absolute; top: 0; bottom: 0; left: 40px; margin: auto; /* 这里及以上的定位，可以让该元素竖直居中。(top: 0; bottom: 0;) */ opacity: 0; display: block; width: 30px; height: 30px; cursor: pointer; }

    .sex span { position: absolute; top: 0; bottom: 0; left: 40px; margin: auto; display: block; width: 25px; height: 25px; border: 1px solid #000; border-radius: 50%; cursor: pointer; }

    .sex span.active { background-color: #000;padding:-5px; }

</style>

<body>

<form action="">

    <div class="sex">

        <div class="female">

            <label for="female">女</label>

            <input type="radio" name="sex" id="female">

            <span class="female-custom"></span> </div>

        <div class="male">

            <label for="male">男</label>

            <input type="radio" name="sex" id="male">

            <span class="male-custom"></span> </div>

    </div>

</form>

<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script>

    $("#male").click( function () {

        $(this).siblings("span").addClass("active");

        $(this).parents("div").siblings("div").children("span").removeClass("active");

    });

    $("#female").click( function () {

        $(this).siblings("span").addClass("active");

        $(this).parents("div").siblings("div").children("span").removeClass("active");

    });

</script>

</body>

</html>

自定义单选框radio样式的更多相关文章

  1. 单选框radio总结（获取值、设置默认选中值、样式）

    单选框 radio <div class="radio-inline"> <input type="radio" name="kil ...

  2. CSS学习笔记三：自定义单选框，复选框，开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  3. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  4. 替换input单选框的样式

    实现效果:. css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法. 思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在 ...

  5. 自定义checkbox， radio样式

    17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...

  6. 吾八哥学Selenium(三)：操作复选框checkbox/单选框radio的方法

    复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码 ...

  7. MFC学习单选框Radio使用

    创建单选框Radio ,ID号IDC_RADIO_NAME 1.获取单选框内容 int RadioState = ((CButton *)GetDlgItem(IDC_RADIO_NAME))-> ...

  8. jquery单选框radio绑定click事件实现和是否选中的方法

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...

  9. jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...

随机推荐

  1. iview里select组件搜索后选中的数据和展示内容不一样

    原因:option上的key设置的不唯一 保证key的值唯一

  2. css+div水平居中

    实现div内容水平居中 实现方案一:margin:0 auto; div{ height:100px; width:100px; background:red; margin:0 auto; } &l ...

  3. C# xml通过xslt转换为html输出

    html效果截图: 1.首先分析html代码结构: 结果如图: 2.调用接口返回的数据格式: 3.由第一步可看出每2个数据为一行并排显示,后台返回的数据总数可能为奇数个或偶数个,对应该生成的xml结构 ...

  4. js面向对象设计之class中一些坑和技巧

    this的指向 super 类工厂,类中定义方法名时,可以使用字符串,这就可以创建工厂函数(类似模板类) Generator 函数 静态属性和私有属性.私有方法 new.target

  5. Java基础学习—思维导图

    找到两张Java学习的思维导图,特别适合我这样的菜鸟学习,贴过来和小伙伴分享.

  6. iOS上Delegate的悬垂指针问题

    文章有点长,写的过程很有收获,但读的过程不一定有收获,慎入 [摘要]   悬垂指针(dangling pointer)引起的crash问题,是我们在iOS开发过程当中经常会遇到的.其中由delegat ...

  7. Linux安装Tomcat服务器发布项目教程

    前面小Alan跟大家聊了在Linux服务器上jdk运行环境的安装以及redis非关系型数据库的安装,今天继续跟大家聊聊Tomcat的安装,以及将我们的项目发布上去并成功的访问. 第一步:将tomcat ...

  8. ubuntu16.04安装网易云音乐

    源网址 对于网易,我只服云音乐,业界良心,用过的人都知道.我最喜欢的就是歌曲的评论功能,还有朋友圈子.里面有很多好段子,还有很多的好故事,基本上,不是分手,就是回忆初恋,还有吐槽的.我认为音乐带给人的 ...

  9. elipse安装php

    在用eclipse作为PHP的开发IDE工具时,如果下载的Eclipse不带有PHP功能,则需要我们自己来给Eclipse升级.不过也可以下载eclipseForPHP 在Eclipse的help菜单 ...

  10. MySQL InnoDB锁机制之Gap Lock、Next-Key Lock、Record Lock解析

    MySQL InnoDB支持三种行锁定方式: l   行锁(Record Lock):锁直接加在索引记录上面,锁住的是key. l   间隙锁(Gap Lock):锁定索引记录间隙,确保索引记录的间隙 ...