input美化 checkbox和radio样式
input美化 checkbox和radio样式
看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式:
比起html默认的样式,上图这些是不是美观多了呢?并且这样的input美化,无需jquery插件,只要几行css代码就可以。
思路
思路很简单:(1)将之前的按钮透明度opacity设置为0;(2)外层用div包裹
实现过程
图片下载:
【html代码】
<div class="hdz_input_radio checked"><input type="radio" checked="checked" value="1" class="hdz_radio"/></div>
【css代码】
.hdz_input_radio{
width: 14px;
height: 14px;
padding-top: 3px;
background: url(images/radio.png);
}
.hdz_input_radio.checked{
background: url(images/radio_checked.png);
} .hdz_radio {
opacity:;
cursor: pointer;
-ms-filter:"progid:DXImageTransform.Miscrosoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}
checkbox方法一样:
【html代码】
<div class="hdz_input_checkbox checked"><input type="checkbox" name=" checkbox" class="hdz_checkbox " value="1"/></div>
【css代码】
.hdz_input_checkbox {
width: 14px;
height: 14px;
background: url(images/checkbox.png);
}
. hdz_input_checkbox.checked {
background: url(images/checkbox_checked.png);
}
. hdz_checkbox {
opacity:;
cursor: pointer;
-ms-filter:"progid:DXImageTransform.Miscrosoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}
到这里为止,美化步骤就结束了。但是还缺少了js的点击切换效果。其实切换效果的思路也是比较简单的。
radio:
这是单选控件,所以我们只要将一个组内的name值设置成一样,通过改变css的class就可以了。
$(". hdz_input_radio").on("click",function(){
$(this).addClass("checked").siblings().removeClass("checked");
})
checkbox:
这是多选控件,所以我们对其class做toggle就可以了。
$(".hdz_input_checkbox").on("click",function(){
$(this).toggleClass("checked");
})
或者自己写toggle方法:
$(".hdz_input_checkbox").on("click",function(){
$(this).hasClass("checked") ?$(this).removeClass("checked"):$(this).addClass("checked")
})
input美化 checkbox和radio样式的更多相关文章
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
- 自定义checkbox, radio样式
17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...
- 表单:checkbox、radio样式(用图片换掉默认样式)
checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...
- 自定义checkbox, radio样式总结
任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现 ...
- css设置移动端checkbox和radio样式
复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...
- 利用纯CSS美化checkbox和radio和滑动按钮的实现
W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...
- css自定义checkbox和radio样式
很常见的问题,也有许多人写过类似的文章,自己写来记录下 css代码如下: #myCheck + label,.myRadio + label{ width:16px; height:16px; bor ...
- css input checkbox和radio样式美化
参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...
随机推荐
- iOS开发-关于网络状态的判断
在判断网络状态这个问题上,苹果提供了一个叫Reachability的第三方库,但是这个库并不能真正的检测我们的网络状态,我也是在调试程序的时候发现的.详情可以阅读这个博客http://blog.csd ...
- CSS选择器 使用小结
==> .x-boundlist-floating[style$="px;"] .x-boundlist-item 元素中含有Style属性,并且属性值以"px;& ...
- WatchKit Learning Resources
查看原文:http://leancodingnow.com/watch-kit-learning-resources/ WatchKit是Apple发布的用来开发Apple Watch应用的框架,本 ...
- Owin管道与asp.net管道模型
------2016.3.6 更新 文中提到没有Microsoft.Owin.Host.SystemWeb 这个dll 便不会加载Startup.Configuration,因为这个dll 其中有个O ...
- jquery实现页面局部刷新
后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...
- hdu 4740 The Donkey of Gui Zhou bfs
The Donkey of Gui Zhou Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproble ...
- Codeforces Round #311 (Div. 2) E. Ann and Half-Palindrome 字典树/半回文串
E. Ann and Half-Palindrome Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contes ...
- LintCode 子树
easy 子树 19% 通过 有两个不同大小的二进制树: T1 有上百万的节点: T2 有好几百的节点.请设计一种算法.判定 T2 是否为 T1的子树. 您在真实的面试中是否遇到过这个题? Yes 例 ...
- [Ramda] Filter, Reject and Partition
We'll learn how to get a subset of an array by specifying items to include with filter, or items to ...
- oc-32-@property示例
Goods.h #import <Foundation/Foundation.h> typedef struct{ int year; int month; int day; } MyDa ...