自定义复选框:checked:before样式在IE中不生效求助

Hey there, let's break down why your custom checkbox isn't rendering right in IE and get it fixed!

The Root of the Problem #

Internet Explorer has two key limitations breaking your current code:

• IE9 and earlier don't support pseudo-elements (:before/:after) on <input> elements: Inputs are "replaced elements" (browser-controlled form controls), and IE blocks generating content on these elements.
• IE8 and below don't recognize the :checked pseudo-class at all: Even if pseudo-elements worked on inputs, the checked state wouldn't register in older IE versions.

The Solution: Shift Styling to the Label #

The standard workaround uses the associated <label> element to render your custom checkbox—labels aren't replaced elements and play nice with pseudo-elements across browsers. Here's how to adjust your code:

Updated CSS

/* Hide native checkbox but keep it interactive */
.field input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Style label to hold our custom checkbox */
.field .title-checkbox {
  position: relative;
  padding-left: 30px; /* Space for the custom checkbox */
  line-height: 20px; /* Align text vertically with checkbox */
  cursor: pointer;
}

/* Default (unchecked) checkbox style */
.field .title-checkbox:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: solid 1px rgba(97, 80, 77, 0.5);
}

/* Checked state style */
.field input[type="checkbox"]:checked + .title-checkbox:before {
  background: #ed8b00;
}

Your Original HTML (No Changes Needed!)

<div class="field">
 <input autocomplete="off" id="check" type="checkbox" name="checkbox"/>
 <label class="title-checkbox">Accept terms & conditions.</label>
</div>

How This Works #

• We hide the native checkbox with opacity: 0 (not display: none) so it still receives clicks and maintains form functionality.
• The label's :before pseudo-element acts as our visual checkbox, positioned to the left of the text.
• The adjacent sibling selector (+) targets the label's pseudo-element only when the preceding checkbox is checked—this works in IE9+ and all modern browsers.

For IE8 Compatibility (Optional) #

If you need to support IE8 (which doesn't recognize :checked or sibling selectors), add a bit of JavaScript to toggle a class on the label:

var checkbox = document.getElementById('check');
var label = document.querySelector('.title-checkbox');

// Handle checkbox state changes
checkbox.onchange = function() {
  if (this.checked) {
    label.className += ' checked';
  } else {
    label.className = label.className.replace(' checked', '');
  }
};

Then update the checked state CSS to use the class:

.field .title-checkbox.checked:before {
  background: #ed8b00;
}

This ensures your custom checkbox works across all IE versions, plus Chrome/Firefox/Safari as before.

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