Skip to content
This repository has been archived by the owner on Jun 9, 2022. It is now read-only.

iOS 8.1.2 styled checkboxes with box-sizing: border-box; #349

Open
k03n00b opened this issue Dec 23, 2014 · 1 comment
Open

iOS 8.1.2 styled checkboxes with box-sizing: border-box; #349

k03n00b opened this issue Dec 23, 2014 · 1 comment

Comments

@k03n00b
Copy link

k03n00b commented Dec 23, 2014

It's very difficult to tap this styled checkbox when FastClick is enabled.
I tried this with iPhone 6 and iOS 8.1.2.
There's some issues with box-sizing: border-box; and FastClick, because without box-sizing this demo works perfectly.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui">
    <title>Checkbox</title>
    <script src="http://ftlabs.github.io/fastclick/lib/fastclick.js"></script>
    <style>
        body {
            margin: 30px;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            -o-user-select: none !important;
            user-select: none !important;
        }

        .left {
            float: left;
            margin-right: 10px;
        }

        .no_pointer_events {
            pointer-events: none;
        }

        .options {
            display: inline-block;
        }

        .options label {
            cursor: pointer;
            display: block;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .options label > * {
            pointer-events: none;
        }

        .options .option_cell label {
            background: #FBFBFB;
            background: linear-gradient(to bottom, rgba(255,255,255,.9) 0%, rgb(241,241,241) 100%);
        }

        .options .checked {
            pointer-events: none;
            margin: 1px;
            background: #ffffff;
            border: 1px solid #ffffff;
            box-sizing: border-box;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
            display: block;
            width: 20px;
            height: 20px !important;
            min-height: 20px !important;
            line-height: 20px !important;
        }

        .options input:checked + label span.checked {
            background: #0096d4 !important;
            box-shadow: inset 0 0 0 1px #0377a8, 0 0 0 1px rgba(0, 0, 0, 0.15);
        }

        .options input {
            position: absolute !important;
            visibility: hidden;
            -webkit-appearance: none;
            width: 23px;
            height: 23px;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="terms">
    <div class="left">
        <div class="options">
            <input type="checkbox" tabindex="18" id="terms" name="terms" value="1">
            <label onclick="" for="terms">
                <span class="checked no_pointer_events">&nbsp;</span>
            </label>
        </div>
    </div>
    <div>
        <label onclick="" for="terms">
            Accept with <a rel="nofollow" href="https://www.google.com">Google</a>
        </label>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>
@avdgriendt
Copy link

+1 We had to remove Fastclick because of this.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@k03n00b @avdgriendt