Question

我还在寻求帮助，如何让OFF / ON开关在Safari浏览器中顺利运行。所有其他运行良好的浏览器 - 开关按钮＆＃34;驱动器＆＃34;相应地向左和向右，但在Safary按钮突然向左和向右突然移动。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .ra-box > input[type=checkbox] { opacity: 0; }
            .ra-box { 
                display: inline-block;
                margin: 0;
                padding: 6px;
                cursor: pointer;
                border-radius: 15px;
                overflow: hidden;
                background: #2a3542;
                width: 70px;
                height: 18px;
                position: relative;
            }
            .ra-box:before {
                height: 20px;
                width: 20px;
                background: #41cac0;
                color: #41cac0;
                content: 'ON';
                text-indent: -40px;
                position: absolute;
                top: 5px;
                right: 5px;
                border-radius: 50%;
            }
            .ra-box:after {
                height: 20px;
                width: 20px;
                background: #7f8c9a; 
                color: #fff;
                content: 'OFF';
                position: absolute;
                border-radius: 50%;
                text-indent: 30px;
                top: 5px;
                left: 85px;
            }

            .ra-box.checked:before { right: 85px; }
            .ra-box.checked:after { left: 5px; }
            .ra-box.checked { background: #bdc3c7; }

            .ra-box,.checked,.ra-box.checked,.ra-box:before,.ra-box:after,.ra-box.checked:before,.ra-box.checked:after {
                -webkit-transition: all 0.25s ease-in-out;
                -moz-transition: all 0.25s ease-in-out;
                -ms-transition: all 0.25s ease-in-out;
                -o-transition: all 0.25s ease-in-out;
                transition: all 0.25s ease-in-out;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="ra-box">
            <input type="checkbox" id="toggle-1">
        </div>
        <br />
        <br />
        <div class="ra-box">
            <input type="checkbox" id="toggle-2" checked="checked" />
        </div>
        <br />
        <br />
        <button type="button" id="test">Test</button>
        <script>
            $(document).ready(function () {
                $('.ra-box').click(function () {
                    $(this).toggleClass('checked');
                    var i = $(this).children('input:checkbox').first();
                    i.prop('checked', !i.is(':checked'));
                });
                $('.ra-box > input:checkbox').each(function () {
                    if (!$(this).is(':checked')) {
                        $(this).parent().toggleClass('checked');
                    }
                });
                $('#test').on('click', function () {
                    var a = $('#toggle-1').is(':checked') ? 1 : 0;
                    var b = $('#toggle-2').is(':checked') ? 1 : 0;
                    alert(a + ' ' + b);
                });
            });
        </script>
    </body>
</html>

Safari中的On-Off开关复选框

0 个答案: