1. <!DOCTYPE html >
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <title>更换单选按钮显示样式</title>
  7.     <style>
  8.         input[type='radio'].radio {opacity:0; display:inline-block; height:20px; }
  9.         label.radio {background:url(imgs/radio_check.png) no-repeat; height:20px; padding-left:25px;}
  10.         input[type='radio'].radio:checked + .radio {background:url(imgs/radio_checked.png) no-repeat;}
  11.     </style>
  12. </head>
  13. <body>
  14.  
  15.     <input type="radio" name="gender" id="x" value="X"><label for="x">我要保密</label><br>
  16.     <input type="radio" name="gender" id="y" value="M"><label for="y">我是帅哥</label><br>
  17.     <input type="radio" name="gender" id="z" value="F"><label for="z">我是美女</label><br>
  18.  
  19.     <input type="radio" name="sex" id="a" value="X" class="radio"><label for="a" class="radio">我要保密</label><br>
  20.     <input type="radio" name="sex" id="b" value="M" class="radio"><label for="b" class="radio" >我是帅哥</label><br>
  21.     <input type="radio" name="sex" id="c" value="F" class="radio"><label for="c" class="radio" >我是美女</label><br>
  22. </body>
  23. </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. android 用NineOldAndroid实现的弹出按钮

    NineOldAndroid 1.首先上效果图: 左边这张是没有点击button的时候的效果,   右边这张是点击button 后是以该button为圆的展开5个button

  2. [ucgui] 对话框2——小窗口初始化与消息响应

    >_<" 上一节已经说过,创建过得窗口虽然可见,但是它们是以 “空”的形式出现的.这是因为对话框过程函数尚未包含初始化单个元素的代码.小工具的初始值.由它们所引起的行为以及它们之 ...

  3. 用dom操作替代正则表达式

    在B/S结构客户端越来越“胖”的今天,作为一名全端程序员,您很可能会在前端操作html字符串,注意,是操作html字符串,不是操作当前页面的html. 举个例子,百度推出的在线HTML富文本编辑器Ue ...

  4. 开启Github之旅

    在那个远古时代,我以为可以用GoogleCode干点事,结果啥也没干好.如今,Github已经成为了业界标杆,就连Google.微软.Facebook的开源项目都往Github搬.Github作为全球 ...

  5. Linux命令入门

    // 查看日历cal // 修改密码passwd // 查看目录和文件ls -lls // 查看当前用户信息whoami // 查看当前在线用户userswho 在Linux中,可以使用 vi 编辑器 ...

  6. Which Clang Warning Is Generating This Message?

    Which Clang Warning Is Generating This Message? 根据前面页面制作的pdf:clangwarninglist.pdf 百度网盘:http://pan.ba ...

  7. 利用BitLocker和vhdx创建一个有加密的Win10系统

    如果电脑不支持TPM加密BitLocker,就无法对系统盘进行全盘加密. 可以采用一个变通的方法:创建一个vhdx,将这个虚拟磁盘进行BitLocker加密,然后在这个盘里安装操作系统,最后把vhdx ...

  8. Android显示等宽图片的问题

    安卓开发常遇到一个问题,就是在listView里面,在不知道图片宽高的前提下,另图片布满屏幕(图片宽度等于屏幕宽度,高度自适应).在listView中,只是设置scaleType,imageView. ...

  9. Objective-C 高性能的循环

    Cocoa编程的一个通常的任务是要去循环遍历一个对象的集合  (例如,一个 NSArray, NSSet 或者是 NSDictionary). 这个看似简单的问题有广泛数量的解决方案,它们中的许多不乏 ...

  10. C# 标签(条码)的打印与设计(一)

    C# 标签(条码)的打印与设计(一) C# 标签(条码)的打印与设计(二) 总结:自定义设计条码器.