自定义单选、多选样式

PROMULGATOR

时光や最深处

广东省深圳市

← js鼠标事件（原创）

→ js26个字母音标速记代码

相关代码

自定义单选、多选样式

css3自定义单选按钮和复选框

好看的单选按钮组

css3实现单选

css编写单选复选按钮

单选复选美化

自定义单选框样式

Html

Css

Js

var api = {
    input_checkbox: function(data) {
        var style1 = (data && data.styles) ? data.styles : ''
        var style2 = (data && data.beforeStyles) ? data.beforeStyles : ''
        var style3 = (data && data.afterStyles) ? data.afterStyles : ''
        var styles = 'width: 16px;height: 16px;display: inline-block!important;text-align: center;vertical-align: middle;line-height: 16px;position: relative;' + style1
        var boforeStyle = 'content: "";position: absolute;top: 0px;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9;' + style2
        var afterStyle = 'content: "\\2713";background-color: #fff;position: absolute;top: 0;left: 0;width: 100%;border: 1px solid #e50232;color: #e50232;font-size: 18px;font-weight: bold;' + style3
        document.styleSheets[0].addRule('input[type="checkbox"]', styles)
        document.styleSheets[0].addRule('input[type="checkbox"]:before', boforeStyle)
        document.styleSheets[0].addRule('input[type="checkbox"]:checked:before', afterStyle)
    },
    input_radio: function(data) {
        var style1 = (data && data.styles) ? data.styles : ''
        var style2 = (data && data.beforeStyles) ? data.beforeStyles : ''
        var style3 = (data && data.afterStyles) ? data.afterStyles : ''
        var styles = 'width: 16px;height: 16px;display: inline-block;text-align: center;vertical-align: middle;line-height: 16px;position: relative;cursor: pointer;' + style1
        var boforeStyle = 'content: "";position: absolute;top: -1px;left: -1px;width: 100%;height: 100%;background: #fff;border: 1px solid #d9d9d9;border-radius: 50%;' + style2
        var checkbefore = 'content: "";position: absolute;top: -1px;left: -1px;width: 100%;color: #e50232;font-size: 18px;font-weight: bold;' + style2
        var afterStyle = 'content: "";position: absolute;top: -1px;left: -1px;width: calc(100% - 6px);height: calc(100% - 6px);border-radius: 50%;font-size: 14px;font-weight: bold;margin: 4px;background: #77B6FF;' + style3
        document.styleSheets[0].addRule('input[type="radio"]', styles)
        document.styleSheets[0].addRule('input[type="radio"]:before', boforeStyle)
        document.styleSheets[0].addRule('input[type="radio"]:checked::before', checkbefore)
        document.styleSheets[0].addRule('input[type="radio"]:checked:after', afterStyle)
    }
}
var setCheck = {
    styles: 'cursor:pointer',
    beforeStyles: '',
    afterStyles: 'color:#77B6FF;border-color:#77B6FF'
}
api.input_checkbox(setCheck)
api.input_radio()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

自定义单选、多选样式



代码描述：自定义input、单选、多选样式更改

更新时间：2020-07-16 00:39:35

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>自定义单选、多选样式-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号