CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式
生活随笔
收集整理的這篇文章主要介紹了
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样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 进一步封装axios并调用其读取数据（吐
- 下一篇： Vue在Element UI下使用富文本