javascript - Mousedown 和 Mouseup 事件上的样式复选框

Question

我正在尝试制作可以按下以选择/取消选择的复选框“按钮”。我遇到的问题是，当标签处于事件状态时，它不能完全识别我应用的样式。我希望按钮在视觉上看起来好像已被按下，但现在无法识别 css 中的顶部边框。看起来好像按钮被按下了，但由于顶部边框不起作用，它会移动下面的按钮，就好像没有添加顶部边框一样。如果在 Javascript 中使用 Mousedown 和 Mouseup 可以做到这一点，请告诉我。

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;
        }
        }

Answer 1

您的边框声明需要包含边框样式

#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;
}