文档章节

input 单选框样式更换

h
 hhj187
发布于 2016/10/30 14:13
字数 192
阅读 56
收藏 0
<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>

本文转载自:http://www.cnblogs.com/icerainsoft/p/4097886.html

下一篇: xf
h
粉丝 1
博文 84
码字总数 12457
作品 0
天津
私信 提问
教你两招用纯CSS写Tab切换

说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: 方法一:模拟单选框原理 关于...

璿而不华
2018/05/30
0
0
4.4、Bootstrap V4自学之路------组件---表单

表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表。额外的文档对每个组都是可用的。 类 作用 支持的变量 表单控件的任一组 用在任何块级元素上,比如说或 文本域控件 、 、、...

Asktao
2016/03/23
426
0
Element源码分析系列4-Radio(单选框)

简介 单选框这个组件看似简单,实则知识点众多,较为复杂,如果写一个html的原生单选框,那确实很简单,但是封装一个完整的单选组件就不那么简单了,接下来我们先介绍Vue的单选框的一些原理,...

超级索尼子
2018/08/21
0
0
拜读及分析Element源码-radio组件篇

element-ui 单选框radio组件源码分析,也是很常用的一个 radio-group: 单选组,适用于多个互斥的选项中选择的场景 radio: 单选 radio-button: 按钮样式的单选 2可以单独使用,也可与1组合使...

hollyDysania
2018/09/11
0
0
Bootstrap 表单

在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标记和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默...

wybo521
2016/01/26
88
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部