check选择样式
样式一(H5):
<form action="#">
<div class="wrapper">
<div class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</div>
<lable for="usename">我是选中状态</lable>
</div><div class="wrapper">
<div class="box">
<input type="checkbox" id="usepwd" /><span>√</span>
</div>
<label for="usepwd">我是未选中状态</label>
</div>
</form>
样式一(C3):
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
}.wrapper {
margin-bottom: 10px;
}.box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}.box input {
opacity: 0;
position: absolute;
top:0;
left:0;
}.box span {
position: absolute;
top: -10px;
right: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}input[type="checkbox"] + span {
opacity: 0;
}input[type="checkbox"]:checked + span {
opacity: 1;
}
样式2(H5):
<form action="#">
<div class="wrapper">
<div class="box">
<input type="radio" checked="checked" id="boy" name="1" /><span></span>
</div>
<label for="boy">男</label>
</div>
<div class="wrapper">
<div class="box">
<input type="radio" id="girl" name="1" /><span></span>
</div>
<label for="girl">女</label>
</div>
</form>
样式2(C3):
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
}
.wrapper {
margin-bottom: 10px;
}
.box {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
position: relative;
background: orange;
vertical-align: middle;
border-radius: 100%;
}
.box input {
opacity: 0;
position: absolute;
top:0;
left:0;
width: 100%;
height:100%;
z-index:100;/*使input按钮在span的上一层,不加点击区域会出现不灵敏*/
}.box span {
display: block;
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
background: #fff;
top: 50%;
left:50%;
margin: -5px 0 0 -5px;
z-index:1;
}input[type="radio"] + span {
opacity: 0;}
input[type="radio"]:checked + span {
opacity: 1;
}
check选择样式的更多相关文章
- js 左侧树添加选择样式
选择样式添加 menuToggle: function() { var menus = $('.nav-primary').children('li'); var tog = menus.has('. ...
- bootstrap jQuery Ztree异步载入数据,check选择&可加入、改动、删除节点
效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...
- WPF:自定义ListBox的选择样式
首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的, SystemColors的HighlightBrushKey和HighlightTex ...
- 自定义WPF ListBox的选择样式
(下图:进行多项选择的ListBox) 首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBr ...
- AngularJS中选择样式
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularJSSelectClass.rar 要点,{{ctrl.name}}比<spa ...
- 修改radio与check样式
一般的radio与check的样式很难看,这个时候就需要我们自己修改其样式 逻辑思维: 1.用label包裹input标签以及样式标签,然后将radio定位到界面以外,设置样式标签的样式 2.使用伪类 ...
- LODOP打印超文本字符串拼接2 单选选择css样式表格
之前的相关字符串拼接的博文:LODOP打印超文本字符串拼接1 固定表格填充数值之前博文介绍过,字符串可以随意拼接,只要最后组织成的字符串是自己需要的超文本就可以了,前面还有一篇也是拼接样式的:Lodo ...
- webapp中的日期选择
你是否在开发webapp时,选择用哪种第三方日期选择控件绞尽脑汁? 其实不用那么麻烦,现在移动端都是WebKit内核,支持HTML5,其实只要弱弱的将input中将type="date&qu ...
- easyui datagrid单击单元格选择此列
示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...
随机推荐
- RabbitMQ - Start Up
开始之前 rabbitmq是一个被广泛使用的消息队列,它是由erlang编写的,根据AMQP协议设计实现的. AMQP的主要特征是面向消息.队列.路由(包括点对点和发布/订阅).可靠性.安全. Rab ...
- 向 webview 添加 userScript
添加前,网页代码如下: <!DOCTYPE html> <html> <!--<script type="text/javascript"> ...
- 一个自动换行,不可以滚动的 textview
 主要效果有几点 只显示一行文字 输入文字过长时,自动换行 上下不可以滑动 删除时,自动显示上一行文字. 如何做到 只显示一行 textView.heightAnchor.constraint(eq ...
- MySQL介绍及安装(一)
一.关系型数据库和非关系型数据库 1.1:关系型数据库 关系型数据库是把复杂的数据结构归结为简单的二元关系(即二维表格的形式),在关系型数据库中,对数据的操作几乎全部建立在一个或多个关系表格上的,通过 ...
- 【优化】Filddler用于移动端
Fiddler是一个非常强大的Web调试工具,它能捕获所有客户端和服务器的http和https请求,我们可以对请求监视.设置断点,也能修改输入输出数据,这些特性使得Fiddler成为广大web开发者的 ...
- Android中ListView的使用步骤
第一步: 首先,在 布局文件中,声明listView控件. <ListView android:id="@+id/lv" android:layout_width=&quo ...
- android的几种“通知”方式简单实现(Notification&NotificationManager)
关于通知Notification相信大家都不陌生了,平时上QQ的时候有消息来了或者有收到了短信,手机顶部就会显示有新消息什么的,就类似这种.今天就稍微记录下几种Notification的用法.3.0以 ...
- Django配置celery执行异步任务和定时任务
原生celery,非djcelery模块,所有演示均基于Django2.0 celery是一个基于python开发的简单.灵活且可靠的分布式任务队列框架,支持使用任务队列的方式在分布式的机器/进程/线 ...
- linux ping 命令解析
不管在windows平台,还是在linux平台,ping都是非常常用的网络命令:ping命令通过ICMP(Internet控制消息协议)工作:ping可以用来测试本机与目标主机是否联通.联通速度如何. ...
- WPF设置控件获得焦点FocusManager
简单用法如下: 在父类容器中通过附加属性FocusManager.FocusedElement来绑定需要强制获得焦点的控件,用法如下: <Grid FocusManager.FocusedE ...