如何用CSS解决ASP.NET Bootstrap复选框勾选后消失的问题

这种情况我之前也碰到过！Bootstrap的默认表单样式有时候会和ASP.NET WebForms生成的复选框结构冲突，导致勾选后原生控件被隐藏。要快速解决这个问题，你可以用带!important的CSS规则强制覆盖Bootstrap的样式，确保复选框无论是否勾选都保持可见：

/* 强制显示WebForms复选框，覆盖Bootstrap的隐藏样式 */
input[type="checkbox"],
input[type="checkbox"]:checked {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
}

如果上面的规则还没解决问题，大概率是Bootstrap对复选框的伪元素或父容器做了隐藏处理，可以再补充下面的规则：

/* 处理可能被隐藏的复选框相关伪元素和容器 */
input[type="checkbox"]::before,
input[type="checkbox"]::after,
span[class*="checkbox"] {
    opacity: 1 !important;
    visibility: visible !important;
}

问题根源小说明 #

ASP.NET WebForms的<asp:CheckBox>控件会渲染成包含<input>、<label>甚至额外<span>的结构，而Bootstrap的自定义表单样式通常会把原生复选框设为透明或隐藏，用伪元素来模拟复选框外观。这种样式逻辑和WebForms的控件结构不兼容，就会出现勾选后原生控件消失的情况。

小提示 #

记得把这段CSS放在Bootstrap的CSS文件之后引入，再加上!important就能确保优先级足够高；如果你的复选框有自定义类名，也可以把选择器改成你的类名（比如.my-webform-checkbox），避免影响其他表单控件。

内容的提问来源于stack exchange，提问作者Jason