Styling Checkbox on Mousedown and Mouseup Events

Question

I am attempting to make checkbox "buttons" that can be pressed to select/deselect. The problem I am running in to is that when the label is active it does not fully recognize the styles I have applied. I want the button to visually look as though it has been pressed, but right now the top border in the css is not being recognized. It looks as if the button is being pressed, but since the top border is not working it shifts the buttons below as if there is no top border added. If this is possible to do in Javascript with Mousedown and Mouseup, please let me know.

http://jsfiddle.net/jasonniebauer/sf3W8/

<div id="card_acceptance">
            <p>
                Select all that apply:
            </p>
            <input type="checkbox" id="mc_credit" value=""/>
                <label for="mc_credit" name="mc_credit_button">
                    MC Credit
                </label>
            <input type="checkbox" id="visa_credit" value=""/>
                <label for="visa_credit">
                    Visa Credit
                </label>
            <input type="checkbox" id="discover_credit" value=""/>
                <label for="discover_credit">
                    Discover Credit
                </label>
            <input type="checkbox" id="amex_id" value=""/>
                <label for="amex_id">
                    AMEX
                </label>
            <input type="checkbox" id="pin_debit" value=""/>
                <label for="pin_debit">
                    PIN-Based Debit
                </label>
        </div>

#card_acceptance p {
            font-size: 1.125em;
            margin-bottom: .5rem;
        }

        #card_acceptance input[type="checkbox"] + label,
        #card_acceptance2 input[type="checkbox"] + label {
            box-sizing:border-box;
            padding: 1rem 3rem 1rem 3rem;
            width: 100%;
            display: block;
            color: #BDC3C7;
            background-color: #F2F2F2;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            border-bottom: 4px solid #BDC3C7;
            border-radius: 3px;
            margin-bottom: 1rem;
        }

        #card_acceptance input[type="checkbox"] + label:hover,
        #card_acceptance2 input[type="checkbox"] + label:hover {
            background: #E8E8E8;
            color: #898989;
            -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
            -webkit-transition-property: border, color, background-color;
            -webkit-transition-duration: 0.25s, 0.25s, 0.25s;
            -webkit-transition-timing-function: linear, linear, linear;
            -webkit-transition-delay: initial, initial, initial;
            transition: border .25s linear, color .25s linear, background-color .25s linear;
            transition-property: border, color, background-color;
            transition-duration: 0.25s, 0.25s, 0.25s;
            transition-timing-function: linear, linear, linear;
            transition-delay: initial, initial, initial;
        }

        #card_acceptance input[type="checkbox"] + label:active,
        #card_acceptance2 input[type="checkbox"] + label:active {
            border-bottom: 0px;
            border-top: 4px #FFFFFF;
            border-radius: 3px;
        }

        #card_acceptance input[type="checkbox"]:checked + label,
        #card_acceptance2 input[type="checkbox"]:checked + label {
            background-color: #3498DB;
            color: #FFFFFF;
            outline: 0;
            border-bottom: 4px solid #217DBB;
        }

        #card_acceptance input[type="checkbox"]:checked + label:hover,
        #card_acceptance2 input[type="checkbox"]:checked + label:hover {
            background-color: #258CD1;
            color: #FFFFFF;
            -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
            -webkit-transition-property: border, color, background-color;
            -webkit-transition-duration: 0.25s, 0.25s, 0.25s;
            -webkit-transition-timing-function: linear, linear, linear;
            -webkit-transition-delay: initial, initial, initial;
            transition: border .25s linear, color .25s linear, background-color .25s linear;
            transition-property: border, color, background-color;
            transition-duration: 0.25s, 0.25s, 0.25s;
            transition-timing-function: linear, linear, linear;
            transition-delay: initial, initial, initial;
        }

        #card_acceptance input[type="text"],
        #card_acceptance2 input[type="text"] {
            margin-bottom: 1rem;
            display: none;
        }

        #card_acceptance input[type="checkbox"] {
            display: none;
        }
        }

I just checked...seems to be working except for the problem I addressed. — user2736472, Nov 05 '13 at 22:21

score 0 · Answer 1 · answered Nov 05 '13 at 22:23

0

your border declaration needs to include the border style

#card_acceptance input[type="checkbox"] + label:active,
#card_acceptance2 input[type="checkbox"] + label:active {
    border-bottom: 0px;
    border-top: 4px solid #FFFFFF;
    border-radius: 3px;
}

answered Nov 05 '13 at 22:23

tastybytes

1,309
7
17

though this doesn't make it work 100% it does solve your problem with the top border 'not showing'. I would also recommend using box-shadow and margin as such http://jsfiddle.net/3n1gm4/8XLJ3/ – tastybytes Nov 05 '13 at 22:31

Styling Checkbox on Mousedown and Mouseup Events

1 Answers1