<!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. [翻译]Review——24 tips for React Native you probably want to know

    Post author: Albert Gao Post link: http://www.albertgao.xyz/2018/05/30/24-tips-for-react-native-you- ...

  2. jQuery箭头切换图片 - 学习笔记

    jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z):        x 代表横向坐标移向量的长度       y 代表纵向坐标移 ...

  3. textarea 元素的 placeholder 属性不显示

    <textarea> 标签定义多行的文本输入控件. placeholder:描述文本区域预期值的简短提示. textarea 的 placeholder 属性值不显示的原因可能是 < ...

  4. CSS - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (P ...

  5. Spring Boot—08Jackson处理JSON

    package com.sample.smartmap.controller; import java.io.IOException; import java.math.BigDecimal; imp ...

  6. 一起来学习android自定义控件—边缘凹凸的View

    1前言 最近做项目的时候遇到一个卡劵的效果,由于自己觉得用图片来做的话可以会出现适配效果不好,再加上自己自定义view方面的知识比较薄弱,所以想试试用自定义View来实现.但是由于自己知识点薄弱,一开 ...

  7. 【AOP】spring 的AOP编程报错：[Xlint:invalidAbsoluteTypeName]error

    AOP来发过程中,报错如下: warning no match for this type name: net.shopxx.wx.institution.controller [Xlint:inva ...

  8. fastdfs搭建和使用

    目录 前言 安装 安装插件 tracker storage 用自带的 client 进行测试 想要查看结果必须安装nginx 使用示例 引用 配置 使用 前言 参考网址 错误处理 安装 安装插件 yu ...

  9. HBase 负载均衡

    HBase 可以根据当前集群的负载以region为单位进行rebalance.在HMaster中,后台会起一个线程定期检查是否需要进行rebalance,线程叫做BalancerChore.线程每隔  ...

  10. OSCache-缓存对象

    在实际应用中除了JSP标签库,还可以使用OSCache提供的Java API.下面我来介绍一个实用的Java类,使用GeneralCacheAdministrator来建立,刷新和管理缓存. Gene ...