Javascript Mousedown和Mouseup事件上的样式设置复选框

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

选择所有适用的选项：

信用卡
Visa信用卡
发现信用
美国运股票交易所
基于PIN的借记卡
#信用卡承兑汇票{
字号：1.125em；
边缘底部：.5rem；
}
#卡片接受输入[type=“checkbox”]+标签，
#卡片接受2输入[type=“checkbox”]+标签{
框大小：边框框；
填充：1rem 3rem 1rem 3rem；
宽度：100%；
显示：块；
颜色：#BDC3C7；
背景色：#F2F2；
文本对齐：居中；
垂直对齐：中间对齐；
光标：指针；
边框底部：4px实心#BDC3C7；
边界半径：3px；
边缘底部：1rem；
}
#卡片接受输入[type=“checkbox”]+标签：悬停，
#卡片接受2输入[type=“checkbox”]+标签：悬停{
背景：#E8E8E8；
颜色：#8989；
-webkit过渡：边框.25s线性，颜色.25s线性，背景色.25s线性；
-webkit转换属性：边框、颜色、背景色；
-webkit转换持续时间：0.25s、0.25s、0.25s；
-webkit过渡计时功能：线性、线性、线性；
-webkit转换延迟：初始、初始、初始；
过渡：边框.25s线性，颜色.25s线性，背景色.25s线性；
过渡属性：边框、颜色、背景色；
过渡时间：0.25s、0.25s、0.25s；
过渡时间函数：线性、线性、线性；
过渡延迟：初始、初始、初始；
}
#卡片接受输入[type=“checkbox”]+标签：激活，
#卡片接受2输入[type=“checkbox”]+标签：激活{
边框底部：0px；
边框顶部：4px#FFFFFF；
边界半径：3px；
}
#卡片接受输入[type=“checkbox”]：选中+标签，
#卡片接受2输入[type=“checkbox”]：选中+标签{
背景色：#3498DB；
颜色：#FFFFFF；
大纲：0；
边框底部：4px实心#217DBB；
}
#卡片接受输入[type=“checkbox”]：选中+标签：悬停，
#卡片接受2输入[type=“checkbox”]：选中+标签：悬停{
背景色：#258CD1；
颜色：#FFFFFF；
-webkit过渡：边框.25s线性，颜色.25s线性，背景色.25s线性；
-webkit转换属性：边框、颜色、背景色；
-webkit转换持续时间：0.25s、0.25s、0.25s；
-webkit过渡计时功能：线性、线性、线性；
-webkit转换延迟：初始、初始、初始；
过渡：边框.25s线性，颜色.25s线性，背景色.25s线性；
过渡属性：边框、颜色、背景色；
过渡时间：0.25s、0.25s、0.25s；
过渡时间函数：线性、线性、线性；
过渡延迟：初始、初始、初始；
}
#卡片接收输入[type=“text”]，
#卡片接受2输入[type=“text”]{
边缘底部：1rem；
显示：无；
}
#卡片接受输入[type=“checkbox”]{
显示：无；
}
}

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

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

---

我想你的提琴有问题我刚检查过…除了我解决的问题外，似乎还能用。这有帮助吗？仍然需要帮助吗？仍然没有解决方案…虽然这不能使它100%工作，但它确实解决了顶部边框“未显示”的问题。我还建议使用框阴影和边距

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