How to override Bootstrap default CSS styles?

Transition realizes the lightest and controllable page fade-out. It needs to cooperate with the two-step control of opacity and visibility. JS listens to the transitionend and then uninstalls the component. The animation mask is prone to lag, z-index conflicts and the status is difficult to synchronize. It is only necessary in a few scenarios such as sensitive information.

In Safari, the background-filter needs to be prefixed with -webkit- and the background is opaque to take effect; the blur value cannot be 0; the size of the blurred area affects performance more than the numerical value; text needs to be enhanced with contrast and strokes to ensure readability.

The fundamental reason is that the browser does not support the direct application of position:sticky to the thead, because the display:table of the parent container table limits the sticky behavior; the tbody must be moved into an independent scrolling container and a display:block split structure must be set up to unify the column width with colgroup to achieve a stable fixed header.

Shake animation should use translateX() to achieve left and right displacement instead of rotate(); it needs to be combined with @keyframes to define a 0%/25%/50%/75%/100% offset sequence, and the offset is controlled within ±2px~±6px; animation-fill-m must be added ode:forwards (or use both), select cubic-bezier(.36,.07,.19,.97) for easing; the old animation must be cleared and forced to rearrange before JS is triggered; use will-change with caution on the mobile terminal, and only add translateZ(0) to ensure hardware acceleration.

Mobile side::-webkit-scrollbar often fails because Android WebView and Safari before iOS 16.4 do not support this pseudo element; iOS 16.4 only has limited support, and Android basically does not support it; the alternative is to disable the native scroll bar and customize it with CSS JS.

The essence of the inaccurate offset of position:absolute in IE6–8 is that the parent container does not trigger hasLayout, causing the absolute positioning reference to the wrong containing block; it needs to be actively triggered by reliable methods such as zoom:1, rather than relying solely on position:relative.

The input:valid and input:invalid pseudo-classes do not take effect because the browser does not trigger native verification due to the lack of required attributes or type semantic types (such as email, url); Bootstrap's is-valid/is-invalid relies on JS rather than pseudo-classes, so you need to ensure that HTML constraints exist and CSS weight is sufficient.

The default style of the Bootstrap switch cannot be changed because it draws visual effects through pseudo elements::before/::after, which needs to cover .form-switch.form-check-input .form-check-label::before (track) and ::after (slider) and handle all states such as: checked, :disabled and :checked:disabled.