<!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. BZOJ3832: [Poi2014]Rally(拓扑排序 堆)

    题意 题目链接 Sol 最直观的思路是求出删除每个点后的最长路,我们考虑这玩意儿怎么求 设\(f[i]\)表示以\(i\)结尾的最长路长度,\(g[i]\)表示以\(i\)开始的最长路长度 根据DAG ...

  2. exception processing, template error resolving template

    错误信息:Exception processing template “/view/df”: Error resolving template “/view/df”, template might n ...

  3. js判断移动端页面按home键切换到桌面事件

    ---恢复内容开始--- 原理就是通过页面标签切换事件(visibilitychange)来判断,亦可用户移动端桌面和app切换. 先看代码: var hiddenProperty = 'hidden ...

  4. 【node】用koa搭建一个增删改服务（一）

    前文,vue分类里有一个日志demo的练习,这篇文章就是介绍针对日志demo的服务是怎么写的 一.koa搭建项目 1. npm init 2. npm install koa 二.建数据库 下面是项目 ...

  5. Python 利用Python编写简单网络爬虫实例3

    利用Python编写简单网络爬虫实例3 by:授客 QQ:1033553122 实验环境 python版本:3.3.5(2.7下报错 实验目的 获取目标网站“http://bbs.51testing. ...

  6. reportConfig.xml两种数据源连接的配置方式

     在reportConfig.xml配置文件中,我们提供了两种数据源连接的配置方式,分别如下: 1.jndi数据源配置(即:在dataSource中配置) 此配置适用于在j2ee的服务器中配置了j ...

  7. Listview点击已读使用getBadgeView标示

    重:每个ListItem是属于ListItem自己的,不能够放到ViewHolder中,而是数据源每项的. @Override public View getView(int position, Vi ...

  8. 网络 互联网接入方法、Mbit与MB的转换

    ADSL:非对称数字用户环路(绝大多数家庭接入方法,使用电话线).可以提供最高1Mbps的上行速率和最高8Mbps的下行速率.最新的ADSL2+可以提供最高24Mbps的下行速率. 千千兆TB 千兆G ...

  9. java实现Kafka生产者示例

    使用java实现Kafka的生产者 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  10. Pig模式

    Pig中的模式可以是用户显示声明的,也可以是Pig通过用户的使用方式猜测的. Pig对模式的认知在Pig Latin脚本执行的不同阶段可能是不同的.     下面的语句,用户显示声明了模式:3个字段, ...