<!DOCTYPE html >

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>更换单选按钮显示样式</title>

    <style>

        input[type='radio'].radio {opacity:0; display:inline-block; height:20px; }

        label.radio {background:url(imgs/radio_check.png) no-repeat; height:20px; padding-left:25px;}

        input[type='radio'].radio:checked + .radio {background:url(imgs/radio_checked.png) no-repeat;}

    </style>

</head>

<body>

    <input type="radio" name="gender" id="x" value="X"><label for="x">我要保密</label><br>

    <input type="radio" name="gender" id="y" value="M"><label for="y">我是帅哥</label><br>

    <input type="radio" name="gender" id="z" value="F"><label for="z">我是美女</label><br>

    <input type="radio" name="sex" id="a" value="X" class="radio"><label for="a" class="radio">我要保密</label><br>

    <input type="radio" name="sex" id="b" value="M" class="radio"><label for="b" class="radio" >我是帅哥</label><br>

    <input type="radio" name="sex" id="c" value="F" class="radio"><label for="c" class="radio" >我是美女</label><br>

</body>

</html>

HTML单选按钮样式更换的更多相关文章

  1. JQuery统一复写美化项目中所有radio单选按钮样式

    老项目要升级改版,对于分散在各页面的样式不好处理,怕有遗漏,尤其是优化input表单,修改其默认样式,接下来,我将给大家分享一下,我在项目中的总结. 效果 上代码: 1.简单搞一搞 CSS,此处代码有 ...

  2. wpf 自定义RadioButton控件样式

    实现的效果为: 我感觉来自定义RadioButton样式和定义button空间的样式差不多,只是类型不同而已. 接下来分析一下样式代码: <!--自定义单选按钮样式-->        & ...

  3. WPF常用样式总结

    常用控件样式: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation ...

  4. 简单的纯css重置input单选多选按钮的样式--利用伪类

    由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮 html <input type="radio" /> <input typ ...

  5. 微信小程序开发——修改小程序原生checkbox、radio默认样式

    复选框: 闲话少说,这里直接介绍如何修改小程序提供的复选框的样式,如原生的是这样的: 需要的是这样的: 示例代码: /*复选框外框样式*/ checkbox .wx-checkbox-input { ...

  6. whdxlib

    1 数据库系统实现 实 验 指 导 书 齐心 彭彬 计算机工程与软件实验中心 2016 年 3 月2目 录实验一.JDBC 应用程序设计(2 学时) ......................... ...

  7. 初试JqueryEasyUI（附Demo）

    写在前面 准备 布局Layout 菜单树Tree 内容页Tabs 右键菜单Menu 表单Form 对话框Dialog 示例Demo下载 关于easyui不多说,对于我们这样没有美术功底的程序员来说,简 ...

  8. css3 选择器（三）

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  9. 决战JS

    经过这几日的学习,测试和摸索,算是了解了一些关于javascript 的相关知识吧.学习过程中做出了一些小DEMO,现总结一下实现这些DEMO的基本思路,如有不妥或更为简便的方法,还希望大神拍砖,共同 ...

随机推荐

  1. NABC模型进行需求分析

    N(需求): 图书租售管理系统.图书租售管理系统必须包含有完善的图书出租功能.还租.预订(租).会员管理.积分管理.简单的财务系统.详细分类统计.各数据排行榜.详细权限管理. A(做法): 因为有一些 ...

  2. SRS用列建模

    基本规则: 五子棋是两个人之间进行的竞技活动,由于对黑方白方 规则不同,黑棋必须先行.五子棋专用盘为 15×15 , 五连子的方向为横.竖.斜. 禁手是对局中被判为负的行棋手段.白棋无禁手. 在棋盘上 ...

  3. [数据库操作]Java中的JDBC的使用方法.

    前言:想必大家在实际编码中都遇到过JDBC的操作, 这里仅做自己的一个总结, 有错误和不完整之处还请大家提出来. 1,JDBC其实一套规范(接口)数据库厂商需要实现此接口(实现类)--数据库驱动 2, ...

  4. python+redis测试环境搭建

    针对windows操作系统. redis安装: 微软操作系统下,需下载github下面的开源项目,redis网站地址可以找到,直接解压即可. cmd到指定目录,输入下方命令,启动redis服务. re ...

  5. 更新日志 - 关于 iOS9 设备的安装及其他优化

    新版 fir.im 上线整 3 周了,感谢你们对 fir.im 的关注和支持!无以言表,唯有做更好用的产品给大家.本周我们对新版做了以下的功能更新和 bug 修复: 功能更新 在使用过程中,请注意: ...

  6. iOS----友盟分享完善版本

    分享 详细集成 注意:1.线上集成文档的示例代码对应的是最新版本的SDK,如果你所用的SDK版本类名或者方法名与此文档不符合,请看随包里面的线下文档或者下载使用最新版本的SDK. 设置友盟appkey ...

  7. css3多列显示

    columen-width:定义单列显示的宽度.初始值是auto,适用于不可替代的块级元素,行内块元素和单元格,表格元素除外. 目前Webkit引擎支持-webkit-column-width,Moz ...

  8. Leetcode 326 Power of Three 数论

    判断一个数是否是3的n次幂 这里我用了一点巧,所有的int范围的3的n次幂是int范围最大的3的n次幂数(即3^((int)log3(MAXINT)) =  1162261467)的约数 这种方法是我 ...

  9. hdu 1548 楼梯 bfs或最短路 dijkstra

    http://acm.hdu.edu.cn/showproblem.php?pid=1548 Online Judge Online Exercise Online Teaching Online C ...

  10. 分享20个吸引眼球的高品质免费PSD网站模板

    当你设计网站的时候,你需要一个美丽的界面来吸引你的听众.在这篇文章中,我将分享一些吸引眼球的商业PSD模板,你可以从中受到启发 EaglesTroop Business Bonfire Pocket ...