CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style>/*自定义checkbox样式*/input[type="checkbox"], input[type="checkbox"]:enabled,input[type="radio"], input[type="radio"]:enabled {cursor: pointer;width: 22px; /*根据背景图片来确定宽度*/height: 22px; /*根据背景图片来确定高度*/background-image: url(http://shuzhiqiang.com/assets/checkBoxAndRadioButton/skins/square/blue.png);/*skins文件夹下面有6中皮肤样式：flat、futurico、line、minimal、polaris、square：flat文件夹里面都有：aero、blue、flat、green、grey、orange、pink、purple、red、yellow这几个png图片；futurico文件夹里面都有：futurico.png图片；line文件夹里面都有：line.png图片；minimal文件夹里面都有：aero、blue、green、grey、minimal、orange、pink、purple、red、yellow这几个png图片；polaris文件夹里面都有：polaris.png图片；minimal文件夹里面都有：aero、blue、green、grey、orange、pink、purple、red、square、yellow这几个png图片。【注意】不同的图片皮肤的不同状态图标的偏离位移像素值是不同的，自己用Photoshop去测量！*//*background-image: url(http://shuzhiqiang.com/assets/checkBoxAndRadioButton/skins/square/blue@2x.png);!*高清图片格式*!*//*background-image: url(http://www.bootcss.com/p/icheck/skins/square/blue.png); !*备用地址*!*/background-repeat: no-repeat;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;transition: none;-moz-transition: none;-webkit-transition: none;-o-transition: none;vertical-align: middle;}input[type="checkbox"] ~ label,input[type="radio"] ~ label {cursor: pointer;font-size: 16px;font-family: 'Microsoft YaHei', 'PingFangSC-Regular', 'sans-serif', 'San Francisco', 'Microsoft Sans Serif', 'Arial';-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;padding-left: 10px;}input[type="checkbox"][hover],input[type="checkbox"]:hover {background-position-x: calc(-24px * 1);}input[type="checkbox"]:checked {background-position-x: calc(-24px * 2);}input[type="checkbox"]:disabled {background-position-x: calc(-24px * 3);pointer-events: none;}input[type="checkbox"]:checked:disabled {background-position-x: calc(-24px * 4);}input[type="radio"], input[type="radio"]:enabled {background-position-x: calc(-24px * 5);}input[type="radio"][hover],input[type="radio"]:hover {background-position-x: calc(-24px * 6);}input[type="radio"]:checked {background-position-x: calc(-24px * 7);}input[type="radio"]:disabled {background-position-x: calc(-24px * 8);pointer-events: none;}input[type="radio"]:checked:disabled {background-position-x: calc(-24px * 9);}</style>
</head>
<body>
<fieldset id="fs1"><legend>舒工给你自定义复选框</legend><input type="checkbox" value="1" id="ch1"> <label for="ch1">复选框（默认）</label><input type="checkbox" value="2" id="ch2" hover> <label for="ch2">复选框（移入状态）</label><input type="checkbox" value="3" id="ch3" checked> <label for="ch3">复选框（选中状态）</label><input type="checkbox" value="4" id="ch4" disabled> <label for="ch4">复选框（禁用状态）</label><input type="checkbox" value="5" id="ch5" checked disabled> <label for="ch5">复选框（选中禁用状态）</label>
</fieldset><fieldset id="fs2"><legend>舒工给你自定义单选框</legend><input type="radio" value="1" id="rd1" name="radio"> <label for="rd1">单选框（默认）</label><input type="radio" value="2" id="rd2" name="radio" hover> <label for="rd2">单选框（移入状态）</label><input type="radio" value="3" id="rd3" name="radio" checked> <label for="rd3">单选框（选中状态）</label><input type="radio" value="4" id="rd4" name="radio" disabled> <label for="rd4">单选框（禁用状态）</label><input type="radio" value="5" id="rd5" checked disabled> <label for="rd5">单选框（选中禁用状态）</label>
</fieldset>
</body>
<script>var check = {get: function (selOrName, isIntValue, isByName) {isByName || (isByName = !(selOrName.includes(".") || selOrName.includes("#")));var arr = isByName ? document.getElementsByName(selOrName) : document.querySelectorAll(selOrName + " input");var r = [];for (var i in arr) {var a = arr[i];a.checked && r.push(isIntValue ? parseInt(a.value) : a.value);}return r;},set: function (selOrName, value, isIntValue, isByName) {isByName || (isByName = !(selOrName.includes(".") || selOrName.includes("#")));var arr = isByName ? document.getElementsByName(selOrName) : document.querySelectorAll(selOrName + " input");for (var i in arr) {var a = arr[i];if (isIntValue) {parseInt(a.value) === parseInt(value) && (a.checked = true);} else {a.value == value && (a.checked = true);}}}, /*全选true，全不选false，反选undefined*/checkAll: function (sel, bool = null) {var arr = document.querySelectorAll(sel + " input[type='checkbox']");for (var i = 0, len = arr.length; i < len; i++) {var a = arr[i];a.checked = bool === null ? !a.checked : bool;}}};/*测试用例*/console.log(check.get("#fs1"));//打印出["3", "5"]console.log(check.get("#fs1", true));//打印出[3, 5]
</script>
</html>

CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式相关推荐

复选框(checkbox)、单选框（radiobox）的使用
复选框(checkbox).单选框(radiobox)的使用复选框: HTML: // 复选框 <input type="checkbox" name="chec ...
在 GridView 控件中添加一列复选框51
简介在前面的教程中 , 我们学习了如何为 GridView 控件添加一列单选按钮来选择一个特定的记录.当用户被限制最多只能从网格中选中一项时,一列单选按钮是一个非常恰当的用户界面.然而,有时我们 ...
JQuery 中选择多选择框，和单选框，实现获取相应选择的值
好久没有弄前端了,还是记一下:建议大家学习时,深入学习一样知识,可以涉猎很多获取单选按钮的值: $(document).ready(function() { $.ajax({//url:base_u ...
C#窗体应用程序之CheckListBox复选列表与ListBox列表框控件
1.CheckListBox复选列表复选框功能类似的复选列表框 (CheckedListBox),方便用户设置和获取复选列表框中的选项,复选列表框显示的效果与复选框类似,但在选择多个选项时操作比一般 ...
bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
VUE项目中获得多个复选框 checkbox 选中的值（jquery）+ 解决 Uncaught TypeError: Cannot read property ‘push‘ of undefine
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 表格生成后第一列是复选框,效果: 表格是直接循环展示的后台返回数据,代码写法: 2. 得复选框 ...
extjs 中动态给gridpanel 复选框赋值
最近在搞extjs时需要动态根据数据给gridpanel的复选框赋值网上看了很多 ,多不行,最后找到一个好使的方法如下: RBACformPanel.getSelectionModel().sel ...
android view 存值,在android studio中保存textview和复选框的值
问:如何在android studio中保存文本视图和复选框的值,以便稍后我进入该活动时以及在设置新值然后保持新值时可见设置的数据. 答:SharedPreferences用于在Android中存储原 ...
在js中动态的判断复选框是否选中
用元素.checked判断. html: <input type="checkbox" class="xuanze" /> js: //获取元素(不 ...

CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式

CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式相关推荐

最新文章

热门文章