<!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. Code Signal_练习题_reverseParentheses

    You have a string s that consists of English letters, punctuation marks, whitespace characters, and ...

  2. CRM Online Outlook Client Configuration Wizard

    CRM Outlook客户端满足和便捷了用户对office outlook和CRM两个程序的使用需求.通过CRM outlook 客户端,用户可以像在浏览器中访问CRM一样,流畅的读写CRM数据.同时 ...

  3. C#+SharpMap的相关代码

    //放大的代码: private void MapZoomIn(NameValueCollection queryString) { SharpMap.Map map = Session[" ...

  4. csv注入漏洞原理&&实战

    前言  为了找工作,巩固巩固知识.本文会介绍 csv 注入漏洞的原理,最后给出一个示例.  正文 在 csv 文件 和 xlsx 文件中的每一项的值如果是 =, @, +, - 就会被 excel 识 ...

  5. 观察者设计模式（ Observable类Observer接口）

    如果要想实现观察者模式,则必须依靠Java.util包中提供的Observable类和Observer接口. class House extends Observable{ // 表示房子可以被观察  ...

  6. JVM知识（二）：类加载器原理

    我们知道我们编写的java代码,会经过编译器编译成字节码(class文件),再把字节码文件装载到JVM中,最后映射到各个内存区域中,我们的程序就可以在内存中运行了.那么问题来了,这些字节码文件是怎么装 ...

  7. Ad-hoc 查询以及动态SQL的罪恶[译]

    本文为翻译文章,原文地址:https://www.simple-talk.com/blogs/2009/08/03/stolen-pages-ad-hoc-queries-and-the-sins-o ...

  8. 数据库对比：选择MariaDB还是MySQL？

    作者 | EverSQL 译者 | 无明 这篇文章的目的主要是比较 MySQL 和 MariaDB 之间的主要相似点和不同点.我们将从性能.安全性和主要功能方面对这两个数据库展开对比,并列出在选择数据 ...

  9. 转： c# 字符串公式计算

    C# 自动计算字符串公式的值(三种方式) 从网络上找到这段源码,重新整理后测试通过. 有三种方式可自动计算字符串公式的值:1. 最简单的方式,由SQL语句计算2. 使用Microsoft.Javasc ...

  10. Linux nl命令详解

    nl常见命令参数 nl命令在linux系统中用来计算文件中行号 -b  :指定行号指定的方式,主要有两种: -b a :表示不论是否为空行,也同样列出行号(类似 cat -n): -b t :如果有空 ...